From 9d0504f8c16de01ceeb79437643e299e44cab115 Mon Sep 17 00:00:00 2001 From: Ajay Ghanwat Date: Fri, 24 Jul 2026 12:10:10 +0530 Subject: [PATCH] first commit --- .gitignore | 26 + .prettierignore | 2 + .vscode/extensions.json | 3 + .vscode/settings.json | 12 + CLAUDE.md | 282 ++ README.md | 23 + app/api/teams.ts | 44 + app/layouts/document.wrn | 22 + app/layouts/showcase.wrn | 70 + app/pages/accessibility.wrn | 16 + app/pages/advanced-forms.wrn | 107 + app/pages/base.wrn | 287 ++ app/pages/blocks.wrn | 11 + app/pages/colors.wrn | 16 + app/pages/components/accordion.wrn | 656 +++++ app/pages/components/advanced-date-picker.wrn | 664 +++++ .../components/advanced-range-slider.wrn | 664 +++++ app/pages/components/advanced-select.wrn | 2604 +++++++++++++++++ app/pages/components/alert.wrn | 664 +++++ app/pages/components/avatar-group.wrn | 664 +++++ app/pages/components/avatar.wrn | 664 +++++ app/pages/components/badge.wrn | 664 +++++ app/pages/components/blockquote.wrn | 664 +++++ app/pages/components/breadcrumb.wrn | 656 +++++ app/pages/components/button-group.wrn | 664 +++++ app/pages/components/button.wrn | 256 ++ app/pages/components/card.wrn | 664 +++++ app/pages/components/carousel.wrn | 664 +++++ app/pages/components/chart.wrn | 664 +++++ app/pages/components/chat-bubble.wrn | 664 +++++ app/pages/components/checkbox.wrn | 122 + app/pages/components/clipboard.wrn | 664 +++++ app/pages/components/collapse.wrn | 652 +++++ app/pages/components/color-picker.wrn | 131 + app/pages/components/columns.wrn | 112 + app/pages/components/combo-box.wrn | 1343 +++++++++ app/pages/components/confetti.wrn | 664 +++++ app/pages/components/container.wrn | 118 + app/pages/components/context-menu.wrn | 132 + app/pages/components/copy-markup.wrn | 131 + app/pages/components/custom-scrollbar.wrn | 112 + app/pages/components/data-map.wrn | 664 +++++ app/pages/components/data-table.wrn | 1193 ++++++++ app/pages/components/date-picker.wrn | 131 + app/pages/components/device-frame.wrn | 664 +++++ app/pages/components/divider.wrn | 117 + app/pages/components/drag-and-drop.wrn | 664 +++++ app/pages/components/drawer.wrn | 132 + app/pages/components/dropdown.wrn | 132 + app/pages/components/file-input.wrn | 131 + app/pages/components/file-upload-progress.wrn | 123 + app/pages/components/file-upload.wrn | 664 +++++ app/pages/components/grid.wrn | 112 + app/pages/components/image.wrn | 115 + app/pages/components/input-group.wrn | 131 + app/pages/components/input-number.wrn | 131 + app/pages/components/input.wrn | 131 + app/pages/components/kbd.wrn | 116 + app/pages/components/layout-splitter.wrn | 112 + app/pages/components/legend-indicator.wrn | 664 +++++ app/pages/components/link.wrn | 122 + app/pages/components/list-group.wrn | 664 +++++ app/pages/components/list.wrn | 664 +++++ app/pages/components/map.wrn | 664 +++++ app/pages/components/marquee.wrn | 664 +++++ app/pages/components/mega-menu.wrn | 656 +++++ app/pages/components/modal.wrn | 132 + app/pages/components/nav.wrn | 656 +++++ app/pages/components/navbar.wrn | 656 +++++ app/pages/components/pagination.wrn | 656 +++++ app/pages/components/pin-input.wrn | 436 +++ app/pages/components/popover.wrn | 132 + app/pages/components/progress.wrn | 121 + app/pages/components/radio.wrn | 122 + app/pages/components/range-slider.wrn | 131 + app/pages/components/rating.wrn | 664 +++++ app/pages/components/scrollspy.wrn | 656 +++++ app/pages/components/search-box.wrn | 131 + app/pages/components/select.wrn | 667 +++++ app/pages/components/sidebar.wrn | 656 +++++ app/pages/components/skeleton.wrn | 117 + app/pages/components/spinner.wrn | 117 + app/pages/components/stepper.wrn | 656 +++++ app/pages/components/strong-password.wrn | 216 ++ app/pages/components/styled-icon.wrn | 664 +++++ app/pages/components/switch.wrn | 122 + app/pages/components/table.wrn | 1197 ++++++++ app/pages/components/tabs.wrn | 656 +++++ app/pages/components/textarea.wrn | 128 + app/pages/components/time-picker.wrn | 131 + app/pages/components/timeline.wrn | 664 +++++ app/pages/components/toast-notifications.wrn | 664 +++++ app/pages/components/toast.wrn | 664 +++++ app/pages/components/toggle-count.wrn | 131 + app/pages/components/toggle-password.wrn | 325 ++ app/pages/components/tooltip.wrn | 136 + app/pages/components/tree-view.wrn | 664 +++++ app/pages/components/typography.wrn | 118 + app/pages/components/wysiwyg-editor.wrn | 664 +++++ app/pages/dark-mode.wrn | 16 + app/pages/docs.wrn | 10 + app/pages/fonts.wrn | 16 + app/pages/forms.wrn | 127 + app/pages/framework-guides.wrn | 16 + app/pages/index.wrn | 27 + app/pages/installation.wrn | 16 + app/pages/integrations.wrn | 137 + app/pages/layout.wrn | 117 + app/pages/navigation.wrn | 107 + app/pages/overlays.wrn | 77 + app/pages/resources.wrn | 16 + app/pages/sizing.wrn | 16 + app/pages/tables.wrn | 27 + app/pages/templates.wrn | 11 + app/pages/themes.wrn | 16 + app/routes.gen.ts | 160 + .../advanced-select-dynamic-validation.ts | 5 + app/schemas/advanced-select-validation.ts | 5 + app/schemas/combobox-validation.ts | 5 + app/schemas/pin-input-validation.ts | 8 + app/schemas/toggle-password-validation.ts | 8 + app/styles/global.css | 2467 ++++++++++++++++ bun.lock | 265 ++ package.json | 35 + public/llms.txt | 276 ++ public/playground.js | 313 ++ scripts/generate-showcase.mjs | 1724 +++++++++++ test/showcase.test.ts | 231 ++ tsconfig.json | 7 + wrnexus.config.ts | 30 + 130 files changed, 46944 insertions(+) create mode 100644 .gitignore create mode 100644 .prettierignore create mode 100644 .vscode/extensions.json create mode 100644 .vscode/settings.json create mode 100644 CLAUDE.md create mode 100644 README.md create mode 100644 app/api/teams.ts create mode 100644 app/layouts/document.wrn create mode 100644 app/layouts/showcase.wrn create mode 100644 app/pages/accessibility.wrn create mode 100644 app/pages/advanced-forms.wrn create mode 100644 app/pages/base.wrn create mode 100644 app/pages/blocks.wrn create mode 100644 app/pages/colors.wrn create mode 100644 app/pages/components/accordion.wrn create mode 100644 app/pages/components/advanced-date-picker.wrn create mode 100644 app/pages/components/advanced-range-slider.wrn create mode 100644 app/pages/components/advanced-select.wrn create mode 100644 app/pages/components/alert.wrn create mode 100644 app/pages/components/avatar-group.wrn create mode 100644 app/pages/components/avatar.wrn create mode 100644 app/pages/components/badge.wrn create mode 100644 app/pages/components/blockquote.wrn create mode 100644 app/pages/components/breadcrumb.wrn create mode 100644 app/pages/components/button-group.wrn create mode 100644 app/pages/components/button.wrn create mode 100644 app/pages/components/card.wrn create mode 100644 app/pages/components/carousel.wrn create mode 100644 app/pages/components/chart.wrn create mode 100644 app/pages/components/chat-bubble.wrn create mode 100644 app/pages/components/checkbox.wrn create mode 100644 app/pages/components/clipboard.wrn create mode 100644 app/pages/components/collapse.wrn create mode 100644 app/pages/components/color-picker.wrn create mode 100644 app/pages/components/columns.wrn create mode 100644 app/pages/components/combo-box.wrn create mode 100644 app/pages/components/confetti.wrn create mode 100644 app/pages/components/container.wrn create mode 100644 app/pages/components/context-menu.wrn create mode 100644 app/pages/components/copy-markup.wrn create mode 100644 app/pages/components/custom-scrollbar.wrn create mode 100644 app/pages/components/data-map.wrn create mode 100644 app/pages/components/data-table.wrn create mode 100644 app/pages/components/date-picker.wrn create mode 100644 app/pages/components/device-frame.wrn create mode 100644 app/pages/components/divider.wrn create mode 100644 app/pages/components/drag-and-drop.wrn create mode 100644 app/pages/components/drawer.wrn create mode 100644 app/pages/components/dropdown.wrn create mode 100644 app/pages/components/file-input.wrn create mode 100644 app/pages/components/file-upload-progress.wrn create mode 100644 app/pages/components/file-upload.wrn create mode 100644 app/pages/components/grid.wrn create mode 100644 app/pages/components/image.wrn create mode 100644 app/pages/components/input-group.wrn create mode 100644 app/pages/components/input-number.wrn create mode 100644 app/pages/components/input.wrn create mode 100644 app/pages/components/kbd.wrn create mode 100644 app/pages/components/layout-splitter.wrn create mode 100644 app/pages/components/legend-indicator.wrn create mode 100644 app/pages/components/link.wrn create mode 100644 app/pages/components/list-group.wrn create mode 100644 app/pages/components/list.wrn create mode 100644 app/pages/components/map.wrn create mode 100644 app/pages/components/marquee.wrn create mode 100644 app/pages/components/mega-menu.wrn create mode 100644 app/pages/components/modal.wrn create mode 100644 app/pages/components/nav.wrn create mode 100644 app/pages/components/navbar.wrn create mode 100644 app/pages/components/pagination.wrn create mode 100644 app/pages/components/pin-input.wrn create mode 100644 app/pages/components/popover.wrn create mode 100644 app/pages/components/progress.wrn create mode 100644 app/pages/components/radio.wrn create mode 100644 app/pages/components/range-slider.wrn create mode 100644 app/pages/components/rating.wrn create mode 100644 app/pages/components/scrollspy.wrn create mode 100644 app/pages/components/search-box.wrn create mode 100644 app/pages/components/select.wrn create mode 100644 app/pages/components/sidebar.wrn create mode 100644 app/pages/components/skeleton.wrn create mode 100644 app/pages/components/spinner.wrn create mode 100644 app/pages/components/stepper.wrn create mode 100644 app/pages/components/strong-password.wrn create mode 100644 app/pages/components/styled-icon.wrn create mode 100644 app/pages/components/switch.wrn create mode 100644 app/pages/components/table.wrn create mode 100644 app/pages/components/tabs.wrn create mode 100644 app/pages/components/textarea.wrn create mode 100644 app/pages/components/time-picker.wrn create mode 100644 app/pages/components/timeline.wrn create mode 100644 app/pages/components/toast-notifications.wrn create mode 100644 app/pages/components/toast.wrn create mode 100644 app/pages/components/toggle-count.wrn create mode 100644 app/pages/components/toggle-password.wrn create mode 100644 app/pages/components/tooltip.wrn create mode 100644 app/pages/components/tree-view.wrn create mode 100644 app/pages/components/typography.wrn create mode 100644 app/pages/components/wysiwyg-editor.wrn create mode 100644 app/pages/dark-mode.wrn create mode 100644 app/pages/docs.wrn create mode 100644 app/pages/fonts.wrn create mode 100644 app/pages/forms.wrn create mode 100644 app/pages/framework-guides.wrn create mode 100644 app/pages/index.wrn create mode 100644 app/pages/installation.wrn create mode 100644 app/pages/integrations.wrn create mode 100644 app/pages/layout.wrn create mode 100644 app/pages/navigation.wrn create mode 100644 app/pages/overlays.wrn create mode 100644 app/pages/resources.wrn create mode 100644 app/pages/sizing.wrn create mode 100644 app/pages/tables.wrn create mode 100644 app/pages/templates.wrn create mode 100644 app/pages/themes.wrn create mode 100644 app/routes.gen.ts create mode 100644 app/schemas/advanced-select-dynamic-validation.ts create mode 100644 app/schemas/advanced-select-validation.ts create mode 100644 app/schemas/combobox-validation.ts create mode 100644 app/schemas/pin-input-validation.ts create mode 100644 app/schemas/toggle-password-validation.ts create mode 100644 app/styles/global.css create mode 100644 bun.lock create mode 100644 package.json create mode 100644 public/llms.txt create mode 100644 public/playground.js create mode 100644 scripts/generate-showcase.mjs create mode 100644 test/showcase.test.ts create mode 100644 tsconfig.json create mode 100644 wrnexus.config.ts diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b024569 --- /dev/null +++ b/.gitignore @@ -0,0 +1,26 @@ +node_modules/ +dist/ +.wrnexus/ +*.db +**/.wrnexus/ +coverage/ +.env +.env.* +!.env.example +*.log +*.db-shm +*.db-wal +*.sqlite +*.sqlite3 +mobile/android/ +mobile/ios/ +mobile/.expo/ +.idea/ +.DS_Store +Thumbs.db +*.tsbuildinfo +.eslintcache + +.vscode/* +!.vscode/settings.json +!.vscode/extensions.json diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..c418fc3 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,2 @@ + +CLAUDE.md diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..59ff820 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["wrnexus.wrnexus", "esbenp.prettier-vscode", "dbaeumer.vscode-eslint"] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6cad09f --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,12 @@ +{ + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit" + }, + "prettier.requireConfig": true, + "[wrn]": { + "editor.defaultFormatter": "wrnexus.wrnexus", + "editor.formatOnSave": true + } +} diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..7f596bb --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,282 @@ +# WrNexus app - instructions for AI coding assistants + +This is a **WrNexus** app. When creating or editing pages, components, API routes, +or features, follow the framework conventions below. WrNexus is private and not in +your training data, so rely on these rules - do NOT assume React/Next.js/Vue patterns. + +# 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 ` / `component ` / `api ` / `schema `. + +## 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
+ 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/) + 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/.wrn ("none" to skip) + + state count = 0 // optional: seeds client-reactive state (omit for pure SSR) + + seo { + title = "Home" + description = "..." + canonical = "/" + } + + view { +

Hello

+

Count is {count}, doubled is {count * 2}.

+ +
+ } + + 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 { + + } +} +``` + +Mount it from any page/component: `
`. +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"`. +- `
` — mount a component (attrs become string props, coerced). +- `` / `` — component/layout slots; fill with `
…
`. +- **Server loop (DB/list/table):** `{#each as [, ]} …rows… {:empty} …fallback… {/each}` — iterates SSR data on the server and renders markup per item. `{item.field}` interpolates (HTML-escaped, XSS-safe). `` 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 } … {:else if } … {:else} … {/if}` — renders the first truthy branch on the server. `` can reference `ssr` data, or the `item`/`index` of an enclosing `{#each}`. Works at page level and inside loops (e.g. `{#if r.active}●{:else}○{/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: `
`, ``. +- 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 { + + + {#each rows as r, i} + + + + + + {:empty} + + {/each} + +
#{i}{r.name}{r.email}
No submissions yet.
+ } +} +``` + +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` (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: `
` + `` (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 # scaffold a new app +wrnexus update --latest # deps + syntax/config migrations + verification +wrnexus generate page # scaffold a page (aliases: g p) +wrnexus generate component | api | schema +wrnexus db migrate | rollback | status | new [--from-models] | generate | seed +wrnexus eject # 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 `. +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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..841d026 --- /dev/null +++ b/README.md @@ -0,0 +1,23 @@ +# WRNexus UI component showcase + +This example renders every component from `@wrnexus/ui` with representative, +prop-driven data. Pages are generated from `packages/ui/component-reference.json` +so coverage stays synchronized with the packaged component catalog. + +```bash +bun run --cwd examples/component-showcase dev +``` + +Open `http://localhost:3000`. The index links to the category catalog, and every +component card opens a dedicated documentation page with three live use cases, +usage examples, its prop API, events, slots, and related navigation. + +After changing UI component props, regenerate and verify the catalog: + +```bash +bun run --cwd examples/component-showcase generate +bun run --cwd examples/component-showcase check +``` + +Files under `app/pages/` are generated. Customize the generator or stylesheet +instead of editing those pages directly. diff --git a/app/api/teams.ts b/app/api/teams.ts new file mode 100644 index 0000000..87e09c8 --- /dev/null +++ b/app/api/teams.ts @@ -0,0 +1,44 @@ +import type { Context } from "@wrnexus/core"; + +const teams = [ + { + value: "design", + label: "Design", + description: "Product and visual design", + icon: "icon-[lucide--palette]", + }, + { + value: "engineering", + label: "Engineering", + description: "Platform and application engineering", + icon: "icon-[lucide--code-2]", + }, + { + value: "growth", + label: "Growth", + description: "Marketing and customer growth", + icon: "icon-[lucide--trending-up]", + }, + { + value: "support", + label: "Support", + description: "Customer operations", + icon: "icon-[lucide--life-buoy]", + }, +]; + +export const GET = async (ctx: Context) => { + const query = (ctx.url.searchParams.get("q") ?? "").trim().toLowerCase(); + const page = Math.max(1, Number(ctx.url.searchParams.get("page") ?? 1)); + const pageSize = 2; + const matches = teams.filter((team) => + `${team.label} ${team.description}`.toLowerCase().includes(query), + ); + const start = (page - 1) * pageSize; + + return Response.json({ + items: matches.slice(start, start + pageSize), + hasMore: start + pageSize < matches.length, + page, + }); +}; diff --git a/app/layouts/document.wrn b/app/layouts/document.wrn new file mode 100644 index 0000000..7fd2b7d --- /dev/null +++ b/app/layouts/document.wrn @@ -0,0 +1,22 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +layout Document { + props { + cookies = {} + theme = "light" + language = "en" + url = "" + pathname = "/" + } + view { + + +
+ + } +} diff --git a/app/layouts/showcase.wrn b/app/layouts/showcase.wrn new file mode 100644 index 0000000..67a8a87 --- /dev/null +++ b/app/layouts/showcase.wrn @@ -0,0 +1,70 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +layout Showcase { + view { +
+
+
+ + WRNexus UI + +
+
+ + +
+
+ +
+ +
+
+
+ } +} diff --git a/app/pages/accessibility.wrn b/app/pages/accessibility.wrn new file mode 100644 index 0000000..de126e9 --- /dev/null +++ b/app/pages/accessibility.wrn @@ -0,0 +1,16 @@ +page AccessibilityGuide { + layout = "showcase" + seo { + title = "Accessibility" + description = "Keyboard interaction, visible focus states, labels, and reduced-motion support ship by default." + } + view { +
+ +
Getting Started

Accessibility

Keyboard interaction, visible focus states, labels, and reduced-motion support ship by default.

+

Overview

Keyboard interaction, visible focus states, labels, and reduced-motion support ship by default.

Configuration

Use the design switcher in the header to test this setting live.

Component behavior

The setting is inherited by components, blocks, templates, and playground previews.

+ + +
+ } +} diff --git a/app/pages/advanced-forms.wrn b/app/pages/advanced-forms.wrn new file mode 100644 index 0000000..ae2d190 --- /dev/null +++ b/app/pages/advanced-forms.wrn @@ -0,0 +1,107 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page AdvancedFormsShowcase { + layout = "showcase" + seo { + title = "Advanced Forms components" + description = "9 advanced-forms components from @wrnexus/ui." + } + view { +
+ Component category +

Advanced Forms

+

9 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

+
9 componentsMultiple use cases106 live configurations
+
+
+
+
+ +
+
+
+
Advanced Forms

Advanced Select

Theme-aware, responsive advanced select component.

+
51 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Advanced Forms

Combo Box

Editable autocomplete combobox with local and remote suggestions.

+
41 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Advanced Forms

Copy Markup

Theme-aware, responsive copy markup component.

+
13 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Advanced Forms

Input Number

Theme-aware, responsive input number component.

+
13 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Advanced Forms

Pin Input

Secure multi-cell PIN and verification-code input with regex and paste support.

+
26 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Advanced Forms

Search Box

Theme-aware, responsive search box component.

+
13 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Advanced Forms

Strong Password

Theme-aware, responsive strong password component.

+
27 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Advanced Forms

Toggle Count

Theme-aware, responsive toggle count component.

+
13 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Advanced Forms

Toggle Password

Accessible password field with optional show and hide controls.

+
24 props · 0 slotsExplore component
+
+
+ } +} diff --git a/app/pages/base.wrn b/app/pages/base.wrn new file mode 100644 index 0000000..eba4c5d --- /dev/null +++ b/app/pages/base.wrn @@ -0,0 +1,287 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page BaseShowcase { + layout = "showcase" + seo { + title = "Base components" + description = "27 base components from @wrnexus/ui." + } + view { +
+ Component category +

Base

+

27 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

+
27 componentsMultiple use cases86 live configurations
+
+
+
+
+ +
Composable content area.
+
+
+
Base

Accordion

Theme-aware, responsive accordion component.

+
5 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Alert

Theme-aware, responsive alert component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Avatar

Theme-aware, responsive avatar component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Avatar Group

Theme-aware, responsive avatar group component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Badge

Theme-aware, responsive badge component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Blockquote

Theme-aware, responsive blockquote component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Button

Theme-aware, responsive button component.

+
25 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Button Group

Theme-aware, responsive button group component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Card

Theme-aware, responsive card component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Carousel

Theme-aware, responsive carousel component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Chat Bubble

Theme-aware, responsive chat bubble component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Collapse

Theme-aware, responsive collapse component.

+
5 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Date Picker

Theme-aware, responsive date picker component.

+
13 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Device Frame

Theme-aware, responsive device frame component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

File Upload Progress

Theme-aware, responsive file upload progress component.

+
7 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Legend Indicator

Theme-aware, responsive legend indicator component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

List

Theme-aware, responsive list component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

List Group

Theme-aware, responsive list group component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Marquee

Theme-aware, responsive marquee component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Progress

Theme-aware, responsive progress component.

+
7 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Rating

Theme-aware, responsive rating component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Skeleton

Theme-aware, responsive skeleton component.

+
5 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Spinner

Theme-aware, responsive spinner component.

+
5 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Styled Icon

Theme-aware, responsive styled icon component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Timeline

Theme-aware, responsive timeline component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Toast

Theme-aware, responsive toast component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Base

Tree View

Theme-aware, responsive tree view component.

+
7 props · 1 slotsExplore component
+
+
+ } +} diff --git a/app/pages/blocks.wrn b/app/pages/blocks.wrn new file mode 100644 index 0000000..59df0ea --- /dev/null +++ b/app/pages/blocks.wrn @@ -0,0 +1,11 @@ +page Blocks { + layout = "showcase" + seo { title = "UI blocks" description = "Complete sections composed from WRNexus UI components." } + view { +
+ +
Composable sections

Ready-to-use UI blocks

Complete responsive sections composed exclusively from the components in this library.

+
Application UI

Application shells

Headers, sidebars, content, and command areas.

View components →
Blog & Articles

Article layouts

Editorial headers, content, author, and sharing.

View components →
Application UI

Authentication

Sign in, registration, recovery, and verification.

View components →
+
+ } +} diff --git a/app/pages/colors.wrn b/app/pages/colors.wrn new file mode 100644 index 0000000..4949fc9 --- /dev/null +++ b/app/pages/colors.wrn @@ -0,0 +1,16 @@ +page ColorsGuide { + layout = "showcase" + seo { + title = "Colors" + description = "Semantic primary, secondary, success, warning, danger, and info tokens remain available in every palette." + } + view { +
+ +
Customization

Colors

Semantic primary, secondary, success, warning, danger, and info tokens remain available in every palette.

+

Brand colors

Primary and secondary tokens communicate brand hierarchy.

Status colors

Success, warning, danger, and info preserve their semantic meaning in every palette.

Component override

Pass color="success" or another semantic color to any component.

+ + +
+ } +} diff --git a/app/pages/components/accordion.wrn b/app/pages/components/accordion.wrn new file mode 100644 index 0000000..60cc7ac --- /dev/null +++ b/app/pages/components/accordion.wrn @@ -0,0 +1,656 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page AccordionDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"accordion-0-1\",\n \"key\": \"accordion-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#accordion-demo\",\n \"actionHref\": \"#accordion-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"accordion-0-2\",\n \"key\": \"accordion-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#accordion-demo\",\n \"actionHref\": \"#accordion-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Accordion" + description = "Theme-aware, responsive accordion component." + } + view { + +
+
+ Base component +

Accordion

+

Theme-aware, responsive accordion component.

+
5 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Accordion

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
Composable content area.
+
+
Component code
+ 
<Accordion
+  items='[
+    {
+      "id": "accordion-0-1",
+      "key": "accordion-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#accordion-demo",
+      "actionHref": "#accordion-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "accordion-0-2",
+      "key": "accordion-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#accordion-demo",
+      "actionHref": "#accordion-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'>
+  <!-- Add default slot content here -->
+</Accordion>
+
+
+
+ +
Component props5 controls
+
+ +
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
Composable content area.
+
+
+
Component usage.wrn
+ 
<Accordion
+  items='[
+    {
+      "id": "accordion-0-1",
+      "key": "accordion-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#accordion-demo",
+      "actionHref": "#accordion-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "accordion-0-2",
+      "key": "accordion-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#accordion-demo",
+      "actionHref": "#accordion-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'>
+  <!-- Add default slot content here -->
+</Accordion>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
Composable content area.
+
+
+
Component usage.wrn
+ 
<Accordion
+  size="sm"
+  items='[
+    {
+      "id": "accordion-1-1",
+      "key": "accordion-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#accordion-demo",
+      "actionHref": "#accordion-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "accordion-1-2",
+      "key": "accordion-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#accordion-demo",
+      "actionHref": "#accordion-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'>
+  <!-- Add default slot content here -->
+</Accordion>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
Rich supporting content with additional context.
+
+
+
Component usage.wrn
+ 
<Accordion
+  size="lg"
+  items='[
+    {
+      "id": "accordion-2-1",
+      "key": "accordion-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#accordion-demo",
+      "actionHref": "#accordion-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "accordion-2-2",
+      "key": "accordion-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#accordion-demo",
+      "actionHref": "#accordion-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'>
+  <!-- Add default slot content here -->
+</Accordion>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
itemsstring[]No
multiplebooleanfalseNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/advanced-date-picker.wrn b/app/pages/components/advanced-date-picker.wrn new file mode 100644 index 0000000..1acf43f --- /dev/null +++ b/app/pages/components/advanced-date-picker.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page AdvancedDatePickerDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Advanced Date Picker example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default advanced date picker for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"advanced-date-picker-0-1\",\n \"key\": \"advanced-date-picker-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#advanced-date-picker-demo\",\n \"actionHref\": \"#advanced-date-picker-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"advanced-date-picker-0-2\",\n \"key\": \"advanced-date-picker-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#advanced-date-picker-demo\",\n \"actionHref\": \"#advanced-date-picker-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Advanced Date Picker" + description = "Theme-aware, responsive advanced date picker component." + } + view { + +
+
+ Integrations component +

Advanced Date Picker

+

Theme-aware, responsive advanced date picker component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Advanced Date Picker

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<AdvancedDatePicker
+  title="Advanced Date Picker example"
+  description="A polished default advanced date picker for a modern application."
+  items='[
+    {
+      "id": "advanced-date-picker-0-1",
+      "key": "advanced-date-picker-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#advanced-date-picker-demo",
+      "actionHref": "#advanced-date-picker-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "advanced-date-picker-0-2",
+      "key": "advanced-date-picker-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#advanced-date-picker-demo",
+      "actionHref": "#advanced-date-picker-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedDatePicker
+  title="Advanced Date Picker example"
+  description="A polished default advanced date picker for a modern application."
+  items='[
+    {
+      "id": "advanced-date-picker-0-1",
+      "key": "advanced-date-picker-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#advanced-date-picker-demo",
+      "actionHref": "#advanced-date-picker-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "advanced-date-picker-0-2",
+      "key": "advanced-date-picker-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#advanced-date-picker-demo",
+      "actionHref": "#advanced-date-picker-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedDatePicker
+  size="sm"
+  title="Compact Advanced Date Picker"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "advanced-date-picker-1-1",
+      "key": "advanced-date-picker-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#advanced-date-picker-demo",
+      "actionHref": "#advanced-date-picker-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "advanced-date-picker-1-2",
+      "key": "advanced-date-picker-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#advanced-date-picker-demo",
+      "actionHref": "#advanced-date-picker-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedDatePicker
+  size="lg"
+  title="Advanced Advanced Date Picker"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "advanced-date-picker-2-1",
+      "key": "advanced-date-picker-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#advanced-date-picker-demo",
+      "actionHref": "#advanced-date-picker-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "advanced-date-picker-2-2",
+      "key": "advanced-date-picker-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#advanced-date-picker-demo",
+      "actionHref": "#advanced-date-picker-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Advanced Date Picker"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/advanced-range-slider.wrn b/app/pages/components/advanced-range-slider.wrn new file mode 100644 index 0000000..b63958d --- /dev/null +++ b/app/pages/components/advanced-range-slider.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page AdvancedRangeSliderDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Advanced Range Slider example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default advanced range slider for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"advanced-range-slider-0-1\",\n \"key\": \"advanced-range-slider-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#advanced-range-slider-demo\",\n \"actionHref\": \"#advanced-range-slider-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"advanced-range-slider-0-2\",\n \"key\": \"advanced-range-slider-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#advanced-range-slider-demo\",\n \"actionHref\": \"#advanced-range-slider-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Advanced Range Slider" + description = "Theme-aware, responsive advanced range slider component." + } + view { + +
+
+ Integrations component +

Advanced Range Slider

+

Theme-aware, responsive advanced range slider component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Advanced Range Slider

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<AdvancedRangeSlider
+  title="Advanced Range Slider example"
+  description="A polished default advanced range slider for a modern application."
+  items='[
+    {
+      "id": "advanced-range-slider-0-1",
+      "key": "advanced-range-slider-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#advanced-range-slider-demo",
+      "actionHref": "#advanced-range-slider-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "advanced-range-slider-0-2",
+      "key": "advanced-range-slider-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#advanced-range-slider-demo",
+      "actionHref": "#advanced-range-slider-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedRangeSlider
+  title="Advanced Range Slider example"
+  description="A polished default advanced range slider for a modern application."
+  items='[
+    {
+      "id": "advanced-range-slider-0-1",
+      "key": "advanced-range-slider-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#advanced-range-slider-demo",
+      "actionHref": "#advanced-range-slider-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "advanced-range-slider-0-2",
+      "key": "advanced-range-slider-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#advanced-range-slider-demo",
+      "actionHref": "#advanced-range-slider-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedRangeSlider
+  size="sm"
+  title="Compact Advanced Range Slider"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "advanced-range-slider-1-1",
+      "key": "advanced-range-slider-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#advanced-range-slider-demo",
+      "actionHref": "#advanced-range-slider-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "advanced-range-slider-1-2",
+      "key": "advanced-range-slider-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#advanced-range-slider-demo",
+      "actionHref": "#advanced-range-slider-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedRangeSlider
+  size="lg"
+  title="Advanced Advanced Range Slider"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "advanced-range-slider-2-1",
+      "key": "advanced-range-slider-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#advanced-range-slider-demo",
+      "actionHref": "#advanced-range-slider-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "advanced-range-slider-2-2",
+      "key": "advanced-range-slider-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#advanced-range-slider-demo",
+      "actionHref": "#advanced-range-slider-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Advanced Range Slider"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/advanced-select.wrn b/app/pages/components/advanced-select.wrn new file mode 100644 index 0000000..9104ae7 --- /dev/null +++ b/app/pages/components/advanced-select.wrn @@ -0,0 +1,2604 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page AdvancedSelectDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Default advanced select" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "advanced-select-1" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "design" + state playground_values = ctx.url.searchParams.get("pg_values") ?? "[]" + state playground_options = ctx.url.searchParams.get("pg_options") ?? "[\n {\n \"value\": \"design\",\n \"label\": \"Design\",\n \"description\": \"Product and visual design\",\n \"icon\": \"icon-[lucide--palette]\",\n \"color\": \"#8b5cf6\",\n \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E\"\n },\n {\n \"value\": \"engineering\",\n \"label\": \"Engineering\",\n \"description\": \"Platform and application engineering\",\n \"icon\": \"icon-[lucide--code-2]\",\n \"color\": \"#0ea5e9\",\n \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E\"\n },\n {\n \"value\": \"growth\",\n \"label\": \"Growth\",\n \"description\": \"Marketing and customer growth\",\n \"icon\": \"icon-[lucide--trending-up]\",\n \"color\": \"#10b981\",\n \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E\"\n },\n {\n \"value\": \"support\",\n \"label\": \"Support\",\n \"description\": \"Customer operations\",\n \"disabled\": false\n }\n]" + state playground_groups = ctx.url.searchParams.get("pg_groups") ?? "[]" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Choose a team" + state playground_placeholderIcon = ctx.url.searchParams.get("pg_placeholderIcon") ?? "" + state playground_searchPlaceholder = ctx.url.searchParams.get("pg_searchPlaceholder") ?? "Search options…" + state playground_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false" + state playground_searchable = ctx.url.searchParams.get("pg_searchable") ?? "true" + state playground_defaultOpen = ctx.url.searchParams.get("pg_defaultOpen") ?? "false" + state playground_clearable = ctx.url.searchParams.get("pg_clearable") ?? "true" + state playground_allowEmpty = ctx.url.searchParams.get("pg_allowEmpty") ?? "false" + state playground_tags = ctx.url.searchParams.get("pg_tags") ?? "false" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false" + state playground_validationMessage = ctx.url.searchParams.get("pg_validationMessage") ?? "" + state playground_helpText = ctx.url.searchParams.get("pg_helpText") ?? "" + state playground_loading = ctx.url.searchParams.get("pg_loading") ?? "false" + state playground_loadingLabel = ctx.url.searchParams.get("pg_loadingLabel") ?? "Loading options…" + state playground_emptyLabel = ctx.url.searchParams.get("pg_emptyLabel") ?? "No options found" + state playground_selectedOptionsLabel = ctx.url.searchParams.get("pg_selectedOptionsLabel") ?? "Selected options" + state playground_clearLabel = ctx.url.searchParams.get("pg_clearLabel") ?? "Clear selection" + state playground_createLabel = ctx.url.searchParams.get("pg_createLabel") ?? "Create" + state playground_loadMoreLabel = ctx.url.searchParams.get("pg_loadMoreLabel") ?? "Load more" + state playground_searchMode = ctx.url.searchParams.get("pg_searchMode") ?? "contains" + state playground_searchFields = ctx.url.searchParams.get("pg_searchFields") ?? "label,description" + state playground_minSearchLength = ctx.url.searchParams.get("pg_minSearchLength") ?? "0" + state playground_searchResultLimit = ctx.url.searchParams.get("pg_searchResultLimit") ?? "0" + state playground_maxSelections = ctx.url.searchParams.get("pg_maxSelections") ?? "0" + state playground_showCounter = ctx.url.searchParams.get("pg_showCounter") ?? "false" + state playground_counterTemplate = ctx.url.searchParams.get("pg_counterTemplate") ?? "{selected} selected" + state playground_optionTemplate = ctx.url.searchParams.get("pg_optionTemplate") ?? "default" + state playground_selectedTemplate = ctx.url.searchParams.get("pg_selectedTemplate") ?? "default" + state playground_closeOnSelect = ctx.url.searchParams.get("pg_closeOnSelect") ?? "true" + state playground_scrollToSelected = ctx.url.searchParams.get("pg_scrollToSelected") ?? "true" + state playground_fixed = ctx.url.searchParams.get("pg_fixed") ?? "false" + state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom" + state playground_remote = ctx.url.searchParams.get("pg_remote") ?? "false" + state playground_remoteUrl = ctx.url.searchParams.get("pg_remoteUrl") ?? "" + state playground_remoteQueryParam = ctx.url.searchParams.get("pg_remoteQueryParam") ?? "q" + state playground_remoteDebounce = ctx.url.searchParams.get("pg_remoteDebounce") ?? "250" + state playground_remoteAutoLoad = ctx.url.searchParams.get("pg_remoteAutoLoad") ?? "true" + state playground_infinite = ctx.url.searchParams.get("pg_infinite") ?? "false" + state playground_hasMore = ctx.url.searchParams.get("pg_hasMore") ?? "false" + state playground_page = ctx.url.searchParams.get("pg_page") ?? "1" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "" + seo { + title = "Advanced Select" + description = "Theme-aware, responsive advanced select component." + } + view { + +
+
+ Advanced Forms component +

Advanced Select

+

Theme-aware, responsive advanced select component.

+
51 props0 slots8 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Advanced Select

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<AdvancedSelect
+  label="Default advanced select"
+  name="advanced-select-1"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+/>
+
+
+
+
+
Component props51 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Selection

Default advanced select

Live default advanced select configuration with copyable component code.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Default advanced select"
+  name="advanced-select-1"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+/>
+
+
+
+
+
+
Selection

Grouped options

Live grouped options configuration with copyable component code.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Grouped options"
+  name="advanced-select-2"
+  value="design"
+  values='[]'
+  options='[]'
+  groups='[
+    {
+      "label": "Product",
+      "options": [
+        {
+          "value": "design",
+          "label": "Design",
+          "description": "Product and visual design",
+          "icon": "icon-[lucide--palette]",
+          "color": "#8b5cf6",
+          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+        },
+        {
+          "value": "engineering",
+          "label": "Engineering",
+          "description": "Platform and application engineering",
+          "icon": "icon-[lucide--code-2]",
+          "color": "#0ea5e9",
+          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+        }
+      ]
+    },
+    {
+      "label": "Business",
+      "options": [
+        {
+          "value": "growth",
+          "label": "Growth",
+          "description": "Marketing and customer growth",
+          "icon": "icon-[lucide--trending-up]",
+          "color": "#10b981",
+          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+        },
+        {
+          "value": "support",
+          "label": "Support",
+          "description": "Customer operations",
+          "disabled": false
+        }
+      ]
+    }
+  ]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+/>
+
+
+
+
+
+
Selection

Fixed-position dropdown

Live fixed-position dropdown configuration with copyable component code.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Fixed-position dropdown"
+  name="advanced-select-3"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+  fixed="true"
+/>
+
+
+
+
+
+
Selection

Placeholder with icon

Live placeholder with icon configuration with copyable component code.

+ 04 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Placeholder with icon"
+  name="advanced-select-4"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a workspace"
+  placeholderIcon="icon-[lucide--building-2]"
+  searchable="false"
+  allowEmpty="false"
+  optionTemplate="icon"
+/>
+
+
+
+
+
+
Selection

Allow empty selection

Live allow empty selection configuration with copyable component code.

+ 05 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Allow empty selection"
+  name="advanced-select-5"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+/>
+
+
+
+
+
+
Selection

Multiple selection

Live multiple selection configuration with copyable component code.

+ 06 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Multiple selection"
+  name="advanced-select-6"
+  values='[
+    "design",
+    "engineering"
+  ]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  multiple="true"
+  searchable="false"
+  allowEmpty="false"
+/>
+
+
+
+
+
+
Selection

Multiple selection with optgroups

Live multiple selection with optgroups configuration with copyable component code.

+ 07 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Multiple selection with optgroups"
+  name="advanced-select-7"
+  values='[
+    "design",
+    "engineering"
+  ]'
+  options='[]'
+  groups='[
+    {
+      "label": "Product",
+      "options": [
+        {
+          "value": "design",
+          "label": "Design",
+          "description": "Product and visual design",
+          "icon": "icon-[lucide--palette]",
+          "color": "#8b5cf6",
+          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+        },
+        {
+          "value": "engineering",
+          "label": "Engineering",
+          "description": "Platform and application engineering",
+          "icon": "icon-[lucide--code-2]",
+          "color": "#0ea5e9",
+          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+        }
+      ]
+    },
+    {
+      "label": "Business",
+      "options": [
+        {
+          "value": "growth",
+          "label": "Growth",
+          "description": "Marketing and customer growth",
+          "icon": "icon-[lucide--trending-up]",
+          "color": "#10b981",
+          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+        },
+        {
+          "value": "support",
+          "label": "Support",
+          "description": "Customer operations",
+          "disabled": false
+        }
+      ]
+    }
+  ]'
+  placeholder="Choose a team"
+  multiple="true"
+  searchable="false"
+  allowEmpty="false"
+/>
+
+
+
+
+
+
Selection

Multiple selection with option templates

Live multiple selection with option templates configuration with copyable component code.

+ 08 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Multiple selection with option templates"
+  name="advanced-select-8"
+  values='[
+    "design",
+    "engineering"
+  ]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  multiple="true"
+  searchable="false"
+  allowEmpty="false"
+  optionTemplate="icon"
+/>
+
+
+
+
+
+
Selection

Multiple selection with counter

Live multiple selection with counter configuration with copyable component code.

+ 09 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Multiple selection with counter"
+  name="advanced-select-9"
+  values='[
+    "design",
+    "engineering"
+  ]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  multiple="true"
+  searchable="false"
+  allowEmpty="false"
+  showCounter="true"
+/>
+
+
+
+
+
+
Selection

Multiple selection with conditional counter

Live multiple selection with conditional counter configuration with copyable component code.

+ 010 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Multiple selection with conditional counter"
+  name="advanced-select-10"
+  values='[
+    "design",
+    "engineering"
+  ]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  multiple="true"
+  searchable="false"
+  allowEmpty="false"
+  maxSelections="3"
+  showCounter="true"
+/>
+
+
+
+
+
+
Selection

Counter with option templates

Live counter with option templates configuration with copyable component code.

+ 011 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Counter with option templates"
+  name="advanced-select-11"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+  showCounter="true"
+  optionTemplate="icon"
+/>
+
+
+
+
+
+
Search & templates

Searchable dropdown

Live searchable dropdown configuration with copyable component code.

+ 012 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Searchable dropdown"
+  name="advanced-select-12"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+/>
+
+
+
+
+
+
Search & templates

Minimum search length

Live minimum search length configuration with copyable component code.

+ 013 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Minimum search length"
+  name="advanced-select-13"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+  minSearchLength="3"
+/>
+
+
+
+
+
+
Search & templates

Search result limit

Live search result limit configuration with copyable component code.

+ 014 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Search result limit"
+  name="advanced-select-14"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+  searchResultLimit="3"
+/>
+
+
+
+
+
+
Search & templates

Scroll to selected option

Live scroll to selected option configuration with copyable component code.

+ 015 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Scroll to selected option"
+  name="advanced-select-15"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+/>
+
+
+
+
+
+
Search & templates

Search match mode

Live search match mode configuration with copyable component code.

+ 016 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Search match mode"
+  name="advanced-select-16"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+  searchMode="startsWith"
+/>
+
+
+
+
+
+
Search & templates

Search labels and descriptions

Live search labels and descriptions configuration with copyable component code.

+ 017 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Search labels and descriptions"
+  name="advanced-select-17"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+/>
+
+
+
+
+
+
Search & templates

Tag-style selection

Live tag-style selection configuration with copyable component code.

+ 018 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Tag-style selection"
+  name="advanced-select-18"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+  tags="true"
+/>
+
+
+
+
+
+
Search & templates

Disabled tag selection

Live disabled tag selection configuration with copyable component code.

+ 019 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Disabled tag selection"
+  name="advanced-select-19"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+  tags="true"
+  disabled="true"
+/>
+
+
+
+
+
+
Search & templates

Option template with icons

Live option template with icons configuration with copyable component code.

+ 020 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Option template with icons"
+  name="advanced-select-20"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+  optionTemplate="icon"
+/>
+
+
+
+
+
+
Search & templates

Option template with avatars

Live option template with avatars configuration with copyable component code.

+ 021 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Option template with avatars"
+  name="advanced-select-21"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+  optionTemplate="avatar"
+/>
+
+
+
+
+
+
Search & templates

Option template with color indicators

Live option template with color indicators configuration with copyable component code.

+ 022 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Option template with color indicators"
+  name="advanced-select-22"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+  optionTemplate="color"
+/>
+
+
+
+
+
+
Search & templates

Advanced select sizes

Live advanced select sizes configuration with copyable component code.

+ 023 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  size="lg"
+  label="Advanced select sizes"
+  name="advanced-select-23"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+/>
+
+
+
+
+
+
Advanced behavior

Disabled advanced select

Live disabled advanced select configuration with copyable component code.

+ 024 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Disabled advanced select"
+  name="advanced-select-24"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+  disabled="true"
+/>
+
+
+
+
+
+
Advanced behavior

Inside a modal

Live inside a modal configuration with copyable component code.

+ 025 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Inside a modal"
+  name="advanced-select-25"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+/>
+
+
+
+
+
+
Advanced behavior

Validation states

Live validation states configuration with copyable component code.

+ 026 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Validation states"
+  name="advanced-select-26"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+  required="true"
+/>
+
+
+
+
+
+
Advanced behavior

Dynamic validation styling

Live dynamic validation styling configuration with copyable component code.

+ 027 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Dynamic validation styling"
+  name="advanced-select-27"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+  required="true"
+/>
+
+
+
+
+
+
Advanced behavior

Add or remove options

Live add or remove options configuration with copyable component code.

+ 028 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Add or remove options"
+  name="advanced-select-28"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+/>
+
+
+
+
+
+
Advanced behavior

Add or remove options in multiple mode

Live add or remove options in multiple mode configuration with copyable component code.

+ 029 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Add or remove options in multiple mode"
+  name="advanced-select-29"
+  values='[
+    "design",
+    "engineering"
+  ]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  multiple="true"
+  searchable="false"
+  allowEmpty="false"
+/>
+
+
+
+
+
+
Advanced behavior

Set a single value programmatically

Live set a single value programmatically configuration with copyable component code.

+ 030 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Set a single value programmatically"
+  name="advanced-select-30"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+/>
+
+
+
+
+
+
Advanced behavior

Set multiple values programmatically

Live set multiple values programmatically configuration with copyable component code.

+ 031 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Set multiple values programmatically"
+  name="advanced-select-31"
+  values='[
+    "design",
+    "engineering"
+  ]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  multiple="true"
+  searchable="false"
+  allowEmpty="false"
+/>
+
+
+
+
+
+
Advanced behavior

Remote data source

Live remote data source configuration with copyable component code.

+ 032 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Remote data source"
+  name="advanced-select-32"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+  minSearchLength="2"
+  remote="true"
+  remoteUrl="/api/teams"
+/>
+
+
+
+
+
+
Advanced behavior

Remote data source (multiple)

Live remote data source (multiple) configuration with copyable component code.

+ 033 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Remote data source (multiple)"
+  name="advanced-select-33"
+  values='[
+    "design",
+    "engineering"
+  ]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  multiple="true"
+  allowEmpty="false"
+  minSearchLength="2"
+  remote="true"
+  remoteUrl="/api/teams"
+/>
+
+
+
+
+
+
Advanced behavior

Remote data tags

Live remote data tags configuration with copyable component code.

+ 034 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Remote data tags"
+  name="advanced-select-34"
+  values='[
+    "design",
+    "engineering"
+  ]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  multiple="true"
+  allowEmpty="false"
+  tags="true"
+  minSearchLength="2"
+  remote="true"
+  remoteUrl="/api/teams"
+/>
+
+
+
+
+
+
Advanced behavior

Option templates with remote data

Live option templates with remote data configuration with copyable component code.

+ 035 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Option templates with remote data"
+  name="advanced-select-35"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+  minSearchLength="2"
+  optionTemplate="icon"
+  remote="true"
+  remoteUrl="/api/teams"
+/>
+
+
+
+
+
+
Advanced behavior

Conditional counter with remote data

Live conditional counter with remote data configuration with copyable component code.

+ 036 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Conditional counter with remote data"
+  name="advanced-select-36"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+  minSearchLength="2"
+  maxSelections="3"
+  showCounter="true"
+  remote="true"
+  remoteUrl="/api/teams"
+/>
+
+
+
+
+
+
Advanced behavior

Avatar template with remote data

Live avatar template with remote data configuration with copyable component code.

+ 037 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Avatar template with remote data"
+  name="advanced-select-37"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+  minSearchLength="2"
+  optionTemplate="avatar"
+  remote="true"
+  remoteUrl="/api/teams"
+/>
+
+
+
+
+
+
Advanced behavior

Preselected values

Live preselected values configuration with copyable component code.

+ 038 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Preselected values"
+  name="advanced-select-38"
+  value="engineering"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+/>
+
+
+
+
+
+
Advanced behavior

Infinite scroll

Live infinite scroll configuration with copyable component code.

+ 039 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Infinite scroll"
+  name="advanced-select-39"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  allowEmpty="false"
+  remote="true"
+  remoteUrl="/api/teams"
+  infinite="true"
+  hasMore="true"
+/>
+
+
+
+
+
+
Advanced behavior

Inside overflow-hidden containers

Live inside overflow-hidden containers configuration with copyable component code.

+ 040 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Inside overflow-hidden containers"
+  name="advanced-select-40"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+  fixed="true"
+/>
+
+
+
+
+
+
Advanced behavior

Destroy and reinitialize

Live destroy and reinitialize configuration with copyable component code.

+ 041 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AdvancedSelect
+  label="Destroy and reinitialize"
+  name="advanced-select-41"
+  value="design"
+  values='[]'
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "disabled": false
+    }
+  ]'
+  groups='[]'
+  placeholder="Choose a team"
+  searchable="false"
+  allowEmpty="false"
+/>
+
+
+
+
Component events

Respond to every interaction

Events are declared with @event, bubble from the component root, and expose their state through event.detail.

@searchFires whenever the autocomplete query changes.
@selectFires after an option is selected by pointer or keyboard.
@changeFires when the selected value changes or is cleared.
@clearFires after the current selection is cleared.
@openFires when the suggestion dropdown opens.
@closeFires when the suggestion dropdown closes.
@loadFires after a remote request succeeds.
@errorFires when a remote request fails.
Event listeners.js
const component = document.querySelector("[data-wrn-select]")
+
+component.addEventListener("select", (event) => {
+  console.log(event.detail.value)
+  console.log(event.detail.complete)
+})
+
+component.addEventListener("load", (event) => {
+  console.log(event.detail)
+})
+
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Advanced Select"No
namestring""No
valuestring""No
valuesstring[]No
optionsstring[]No
groupsstring[]No
placeholderstring"Select an option"No
placeholderIconstring""No
searchPlaceholderstring"Search options…"No
multiplebooleanfalseNo
searchablebooleantrueNo
defaultOpenbooleanfalseNo
clearablebooleantrueNo
allowEmptybooleantrueNo
tagsbooleanfalseNo
disabledbooleanfalseNo
requiredbooleanfalseNo
invalidbooleanfalseNo
validationMessagestring""No
helpTextstring""No
loadingbooleanfalseNo
loadingLabelstring"Loading options…"No
emptyLabelstring"No options found"No
selectedOptionsLabelstring"Selected options"No
clearLabelstring"Clear selection"No
createLabelstring"Create"No
loadMoreLabelstring"Load more"No
searchModestring"contains"No
searchFieldsstring"label,description"No
minSearchLengthnumber0No
searchResultLimitnumber0No
maxSelectionsnumber0No
showCounterbooleanfalseNo
counterTemplatestring"{selected} selected"No
optionTemplatestring"default"No
selectedTemplatestring"default"No
closeOnSelectbooleantrueNo
scrollToSelectedbooleantrueNo
fixedbooleanfalseNo
placementstring"bottom"No
remotebooleanfalseNo
remoteUrlstring""No
remoteQueryParamstring"q"No
remoteDebouncenumber250No
remoteAutoLoadbooleantrueNo
infinitebooleanfalseNo
hasMorebooleanfalseNo
pagenumber1No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/alert.wrn b/app/pages/components/alert.wrn new file mode 100644 index 0000000..b571e73 --- /dev/null +++ b/app/pages/components/alert.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page AlertDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Alert example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default alert for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"alert-0-1\",\n \"key\": \"alert-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#alert-demo\",\n \"actionHref\": \"#alert-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"alert-0-2\",\n \"key\": \"alert-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#alert-demo\",\n \"actionHref\": \"#alert-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Alert" + description = "Theme-aware, responsive alert component." + } + view { + +
+
+ Base component +

Alert

+

Theme-aware, responsive alert component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Alert

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Alert
+  title="Alert example"
+  description="A polished default alert for a modern application."
+  items='[
+    {
+      "id": "alert-0-1",
+      "key": "alert-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#alert-demo",
+      "actionHref": "#alert-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "alert-0-2",
+      "key": "alert-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#alert-demo",
+      "actionHref": "#alert-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Alert
+  title="Alert example"
+  description="A polished default alert for a modern application."
+  items='[
+    {
+      "id": "alert-0-1",
+      "key": "alert-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#alert-demo",
+      "actionHref": "#alert-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "alert-0-2",
+      "key": "alert-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#alert-demo",
+      "actionHref": "#alert-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Alert
+  size="sm"
+  title="Compact Alert"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "alert-1-1",
+      "key": "alert-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#alert-demo",
+      "actionHref": "#alert-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "alert-1-2",
+      "key": "alert-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#alert-demo",
+      "actionHref": "#alert-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Alert
+  size="lg"
+  title="Advanced Alert"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "alert-2-1",
+      "key": "alert-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#alert-demo",
+      "actionHref": "#alert-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "alert-2-2",
+      "key": "alert-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#alert-demo",
+      "actionHref": "#alert-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Alert"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/avatar-group.wrn b/app/pages/components/avatar-group.wrn new file mode 100644 index 0000000..df3244d --- /dev/null +++ b/app/pages/components/avatar-group.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page AvatarGroupDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Avatar Group example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default avatar group for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"avatar-group-0-1\",\n \"key\": \"avatar-group-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#avatar-group-demo\",\n \"actionHref\": \"#avatar-group-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"avatar-group-0-2\",\n \"key\": \"avatar-group-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#avatar-group-demo\",\n \"actionHref\": \"#avatar-group-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Avatar Group" + description = "Theme-aware, responsive avatar group component." + } + view { + +
+
+ Base component +

Avatar Group

+

Theme-aware, responsive avatar group component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Avatar Group

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<AvatarGroup
+  title="Avatar Group example"
+  description="A polished default avatar group for a modern application."
+  items='[
+    {
+      "id": "avatar-group-0-1",
+      "key": "avatar-group-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "avatar-group-0-2",
+      "key": "avatar-group-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AvatarGroup
+  title="Avatar Group example"
+  description="A polished default avatar group for a modern application."
+  items='[
+    {
+      "id": "avatar-group-0-1",
+      "key": "avatar-group-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "avatar-group-0-2",
+      "key": "avatar-group-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AvatarGroup
+  size="sm"
+  title="Compact Avatar Group"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "avatar-group-1-1",
+      "key": "avatar-group-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "avatar-group-1-2",
+      "key": "avatar-group-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AvatarGroup
+  size="lg"
+  title="Advanced Avatar Group"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "avatar-group-2-1",
+      "key": "avatar-group-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "avatar-group-2-2",
+      "key": "avatar-group-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Avatar Group"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/avatar.wrn b/app/pages/components/avatar.wrn new file mode 100644 index 0000000..4246725 --- /dev/null +++ b/app/pages/components/avatar.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page AvatarDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Avatar example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default avatar for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"avatar-0-1\",\n \"key\": \"avatar-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#avatar-demo\",\n \"actionHref\": \"#avatar-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"avatar-0-2\",\n \"key\": \"avatar-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#avatar-demo\",\n \"actionHref\": \"#avatar-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Avatar" + description = "Theme-aware, responsive avatar component." + } + view { + +
+
+ Base component +

Avatar

+

Theme-aware, responsive avatar component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Avatar

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Avatar
+  title="Avatar example"
+  description="A polished default avatar for a modern application."
+  items='[
+    {
+      "id": "avatar-0-1",
+      "key": "avatar-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#avatar-demo",
+      "actionHref": "#avatar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "avatar-0-2",
+      "key": "avatar-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#avatar-demo",
+      "actionHref": "#avatar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Avatar
+  title="Avatar example"
+  description="A polished default avatar for a modern application."
+  items='[
+    {
+      "id": "avatar-0-1",
+      "key": "avatar-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#avatar-demo",
+      "actionHref": "#avatar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "avatar-0-2",
+      "key": "avatar-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#avatar-demo",
+      "actionHref": "#avatar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Avatar
+  size="sm"
+  title="Compact Avatar"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "avatar-1-1",
+      "key": "avatar-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#avatar-demo",
+      "actionHref": "#avatar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "avatar-1-2",
+      "key": "avatar-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#avatar-demo",
+      "actionHref": "#avatar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Avatar
+  size="lg"
+  title="Advanced Avatar"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "avatar-2-1",
+      "key": "avatar-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#avatar-demo",
+      "actionHref": "#avatar-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "avatar-2-2",
+      "key": "avatar-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#avatar-demo",
+      "actionHref": "#avatar-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Avatar"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/badge.wrn b/app/pages/components/badge.wrn new file mode 100644 index 0000000..cad79e4 --- /dev/null +++ b/app/pages/components/badge.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page BadgeDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Badge example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default badge for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"badge-0-1\",\n \"key\": \"badge-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#badge-demo\",\n \"actionHref\": \"#badge-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"badge-0-2\",\n \"key\": \"badge-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#badge-demo\",\n \"actionHref\": \"#badge-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Badge" + description = "Theme-aware, responsive badge component." + } + view { + +
+
+ Base component +

Badge

+

Theme-aware, responsive badge component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Badge

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Badge
+  title="Badge example"
+  description="A polished default badge for a modern application."
+  items='[
+    {
+      "id": "badge-0-1",
+      "key": "badge-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#badge-demo",
+      "actionHref": "#badge-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "badge-0-2",
+      "key": "badge-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#badge-demo",
+      "actionHref": "#badge-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Badge
+  title="Badge example"
+  description="A polished default badge for a modern application."
+  items='[
+    {
+      "id": "badge-0-1",
+      "key": "badge-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#badge-demo",
+      "actionHref": "#badge-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "badge-0-2",
+      "key": "badge-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#badge-demo",
+      "actionHref": "#badge-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Badge
+  size="sm"
+  title="Compact Badge"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "badge-1-1",
+      "key": "badge-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#badge-demo",
+      "actionHref": "#badge-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "badge-1-2",
+      "key": "badge-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#badge-demo",
+      "actionHref": "#badge-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Badge
+  size="lg"
+  title="Advanced Badge"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "badge-2-1",
+      "key": "badge-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#badge-demo",
+      "actionHref": "#badge-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "badge-2-2",
+      "key": "badge-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#badge-demo",
+      "actionHref": "#badge-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Badge"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/blockquote.wrn b/app/pages/components/blockquote.wrn new file mode 100644 index 0000000..8043ce7 --- /dev/null +++ b/app/pages/components/blockquote.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page BlockquoteDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Blockquote example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default blockquote for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"blockquote-0-1\",\n \"key\": \"blockquote-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#blockquote-demo\",\n \"actionHref\": \"#blockquote-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"blockquote-0-2\",\n \"key\": \"blockquote-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#blockquote-demo\",\n \"actionHref\": \"#blockquote-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Blockquote" + description = "Theme-aware, responsive blockquote component." + } + view { + +
+
+ Base component +

Blockquote

+

Theme-aware, responsive blockquote component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Blockquote

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Blockquote
+  title="Blockquote example"
+  description="A polished default blockquote for a modern application."
+  items='[
+    {
+      "id": "blockquote-0-1",
+      "key": "blockquote-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#blockquote-demo",
+      "actionHref": "#blockquote-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "blockquote-0-2",
+      "key": "blockquote-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#blockquote-demo",
+      "actionHref": "#blockquote-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Blockquote
+  title="Blockquote example"
+  description="A polished default blockquote for a modern application."
+  items='[
+    {
+      "id": "blockquote-0-1",
+      "key": "blockquote-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#blockquote-demo",
+      "actionHref": "#blockquote-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "blockquote-0-2",
+      "key": "blockquote-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#blockquote-demo",
+      "actionHref": "#blockquote-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Blockquote
+  size="sm"
+  title="Compact Blockquote"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "blockquote-1-1",
+      "key": "blockquote-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#blockquote-demo",
+      "actionHref": "#blockquote-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "blockquote-1-2",
+      "key": "blockquote-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#blockquote-demo",
+      "actionHref": "#blockquote-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Blockquote
+  size="lg"
+  title="Advanced Blockquote"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "blockquote-2-1",
+      "key": "blockquote-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#blockquote-demo",
+      "actionHref": "#blockquote-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "blockquote-2-2",
+      "key": "blockquote-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#blockquote-demo",
+      "actionHref": "#blockquote-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Blockquote"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/breadcrumb.wrn b/app/pages/components/breadcrumb.wrn new file mode 100644 index 0000000..0fbac5d --- /dev/null +++ b/app/pages/components/breadcrumb.wrn @@ -0,0 +1,656 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page BreadcrumbDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Breadcrumb" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"breadcrumb-0-1\",\n \"key\": \"breadcrumb-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#breadcrumb-demo\",\n \"actionHref\": \"#breadcrumb-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"breadcrumb-0-2\",\n \"key\": \"breadcrumb-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#breadcrumb-demo\",\n \"actionHref\": \"#breadcrumb-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_active = ctx.url.searchParams.get("pg_active") ?? "" + state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Breadcrumb" + description = "Theme-aware, responsive breadcrumb component." + } + view { + +
+
+ Navigation component +

Breadcrumb

+

Theme-aware, responsive breadcrumb component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Breadcrumb

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Breadcrumb
+  items='[
+    {
+      "id": "breadcrumb-0-1",
+      "key": "breadcrumb-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#breadcrumb-demo",
+      "actionHref": "#breadcrumb-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "breadcrumb-0-2",
+      "key": "breadcrumb-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#breadcrumb-demo",
+      "actionHref": "#breadcrumb-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Breadcrumb
+  items='[
+    {
+      "id": "breadcrumb-0-1",
+      "key": "breadcrumb-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#breadcrumb-demo",
+      "actionHref": "#breadcrumb-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "breadcrumb-0-2",
+      "key": "breadcrumb-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#breadcrumb-demo",
+      "actionHref": "#breadcrumb-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Breadcrumb
+  size="sm"
+  label="Compact example"
+  items='[
+    {
+      "id": "breadcrumb-1-1",
+      "key": "breadcrumb-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#breadcrumb-demo",
+      "actionHref": "#breadcrumb-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "breadcrumb-1-2",
+      "key": "breadcrumb-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#breadcrumb-demo",
+      "actionHref": "#breadcrumb-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Breadcrumb
+  size="lg"
+  label="Advanced example"
+  items='[
+    {
+      "id": "breadcrumb-2-1",
+      "key": "breadcrumb-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#breadcrumb-demo",
+      "actionHref": "#breadcrumb-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "breadcrumb-2-2",
+      "key": "breadcrumb-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#breadcrumb-demo",
+      "actionHref": "#breadcrumb-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Breadcrumb"No
itemsstring[]No
activestring""No
orientationstring"horizontal"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/button-group.wrn b/app/pages/components/button-group.wrn new file mode 100644 index 0000000..5e8129a --- /dev/null +++ b/app/pages/components/button-group.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ButtonGroupDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Button Group example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default button group for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"button-group-0-1\",\n \"key\": \"button-group-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#button-group-demo\",\n \"actionHref\": \"#button-group-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"button-group-0-2\",\n \"key\": \"button-group-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#button-group-demo\",\n \"actionHref\": \"#button-group-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Button Group" + description = "Theme-aware, responsive button group component." + } + view { + +
+
+ Base component +

Button Group

+

Theme-aware, responsive button group component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Button Group

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<ButtonGroup
+  title="Button Group example"
+  description="A polished default button group for a modern application."
+  items='[
+    {
+      "id": "button-group-0-1",
+      "key": "button-group-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "button-group-0-2",
+      "key": "button-group-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ButtonGroup
+  title="Button Group example"
+  description="A polished default button group for a modern application."
+  items='[
+    {
+      "id": "button-group-0-1",
+      "key": "button-group-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "button-group-0-2",
+      "key": "button-group-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ButtonGroup
+  size="sm"
+  title="Compact Button Group"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "button-group-1-1",
+      "key": "button-group-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "button-group-1-2",
+      "key": "button-group-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ButtonGroup
+  size="lg"
+  title="Advanced Button Group"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "button-group-2-1",
+      "key": "button-group-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "button-group-2-2",
+      "key": "button-group-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Button Group"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/button.wrn b/app/pages/components/button.wrn new file mode 100644 index 0000000..4bd4244 --- /dev/null +++ b/app/pages/components/button.wrn @@ -0,0 +1,256 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ButtonDetail { + layout = "showcase" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Save & Submit" + state playground_loadingLabel = ctx.url.searchParams.get("pg_loadingLabel") ?? "Loading…" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "" + state playground_as = ctx.url.searchParams.get("pg_as") ?? "button" + state playground_href = ctx.url.searchParams.get("pg_href") ?? "" + state playground_target = ctx.url.searchParams.get("pg_target") ?? "" + state playground_rel = ctx.url.searchParams.get("pg_rel") ?? "" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "submit" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_loading = ctx.url.searchParams.get("pg_loading") ?? "false" + state playground_pill = ctx.url.searchParams.get("pg_pill") ?? "false" + state playground_fullWidth = ctx.url.searchParams.get("pg_fullWidth") ?? "false" + state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" + state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start" + state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "" + state playground_ariaPressed = ctx.url.searchParams.get("pg_ariaPressed") ?? "" + state playground_ariaExpanded = ctx.url.searchParams.get("pg_ariaExpanded") ?? "" + state playground_ariaControls = ctx.url.searchParams.get("pg_ariaControls") ?? "" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "" + state playground_autofocus = ctx.url.searchParams.get("pg_autofocus") ?? "false" + state playground_controlClass = ctx.url.searchParams.get("pg_controlClass") ?? "" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Button" + description = "Theme-aware, responsive button component." + } + view { + +
+
+ Base component +

Button

+

Theme-aware, responsive button component.

+
25 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Button

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Button
+  label="Save & Submit"
+  as="button"
+  type="submit"
+/>
+
+
+
+
+
Component props25 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Default

Primary action

The standard high-emphasis action for forms and product workflows.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Button
+  label="Save & Submit"
+  as="button"
+  type="submit"
+/>
+
+
+
+
+
+
Outline · Small

Secondary navigation

A compact link button with an end icon and restrained emphasis.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Button
+  label="Learn more"
+  as="a"
+  href="#button-demo"
+  variant="outline"
+  size="sm"
+  icon="icon-[lucide--arrow-right]"
+  iconPosition="end"
+/>
+
+
+
+
+
+
Secondary · Large · Pill

Prominent rounded action

A large secondary action using the optional pill shape.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Button
+  label="Upgrade plan"
+  as="button"
+  variant="secondary"
+  size="lg"
+  pill="true"
+/>
+
+
+
+
+
+
Ghost · Icon

Accessible icon action

An icon-only control with its accessible name supplied through props.

+ 04 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Button
+  label="Open settings"
+  as="button"
+  variant="ghost"
+  size="icon"
+  icon="icon-[lucide--settings]"
+  ariaLabel="Open settings"
+/>
+
+
+
+
+
+
Destructive

Dangerous action

A destructive treatment for irreversible or high-risk operations.

+ 05 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Button
+  label="Delete project"
+  as="button"
+  variant="destructive"
+  icon="icon-[lucide--trash-2]"
+/>
+
+
+
+
+
+
Link

Inline action

A low-chrome action that behaves and reads like an inline link.

+ 06 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Button
+  label="Read documentation"
+  as="a"
+  href="#button-demo"
+  variant="link"
+/>
+
+
+
+
+
+
Loading

Pending action

The button owns its busy state, loading label, spinner, and disabled behavior.

+ 07 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Button
+  label="Publish"
+  loadingLabel="Publishing…"
+  as="button"
+  loading="true"
+/>
+
+
+
+
+
+
Disabled

Unavailable action

A visibly and semantically disabled control.

+ 08 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Button
+  label="Unavailable action"
+  as="button"
+  variant="outline"
+  disabled="true"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
labelstring"Button"No
loadingLabelstring"Loading…"No
descriptionstring""No
asstring""No
hrefstring""No
targetstring""No
relstring""No
typestring"button"No
variantstring"default"No
colorstring"primary"No
sizestring"default"No
disabledbooleanfalseNo
loadingbooleanfalseNo
pillbooleanfalseNo
fullWidthbooleanfalseNo
iconstring""No
iconPositionstring"start"No
ariaLabelstring""No
ariaPressedstring""No
ariaExpandedstring""No
ariaControlsstring""No
titlestring""No
autofocusbooleanfalseNo
controlClassstring""No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/card.wrn b/app/pages/components/card.wrn new file mode 100644 index 0000000..a4851ce --- /dev/null +++ b/app/pages/components/card.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page CardDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Card example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default card for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"card-0-1\",\n \"key\": \"card-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#card-demo\",\n \"actionHref\": \"#card-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"card-0-2\",\n \"key\": \"card-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#card-demo\",\n \"actionHref\": \"#card-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Card" + description = "Theme-aware, responsive card component." + } + view { + +
+
+ Base component +

Card

+

Theme-aware, responsive card component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Card

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Card
+  title="Card example"
+  description="A polished default card for a modern application."
+  items='[
+    {
+      "id": "card-0-1",
+      "key": "card-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#card-demo",
+      "actionHref": "#card-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "card-0-2",
+      "key": "card-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#card-demo",
+      "actionHref": "#card-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Card
+  title="Card example"
+  description="A polished default card for a modern application."
+  items='[
+    {
+      "id": "card-0-1",
+      "key": "card-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#card-demo",
+      "actionHref": "#card-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "card-0-2",
+      "key": "card-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#card-demo",
+      "actionHref": "#card-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Card
+  size="sm"
+  title="Compact Card"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "card-1-1",
+      "key": "card-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#card-demo",
+      "actionHref": "#card-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "card-1-2",
+      "key": "card-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#card-demo",
+      "actionHref": "#card-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Card
+  size="lg"
+  title="Advanced Card"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "card-2-1",
+      "key": "card-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#card-demo",
+      "actionHref": "#card-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "card-2-2",
+      "key": "card-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#card-demo",
+      "actionHref": "#card-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Card"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/carousel.wrn b/app/pages/components/carousel.wrn new file mode 100644 index 0000000..8753538 --- /dev/null +++ b/app/pages/components/carousel.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page CarouselDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Carousel example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default carousel for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"carousel-0-1\",\n \"key\": \"carousel-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#carousel-demo\",\n \"actionHref\": \"#carousel-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"carousel-0-2\",\n \"key\": \"carousel-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#carousel-demo\",\n \"actionHref\": \"#carousel-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Carousel" + description = "Theme-aware, responsive carousel component." + } + view { + +
+
+ Base component +

Carousel

+

Theme-aware, responsive carousel component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Carousel

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Carousel
+  title="Carousel example"
+  description="A polished default carousel for a modern application."
+  items='[
+    {
+      "id": "carousel-0-1",
+      "key": "carousel-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "carousel-0-2",
+      "key": "carousel-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Carousel
+  title="Carousel example"
+  description="A polished default carousel for a modern application."
+  items='[
+    {
+      "id": "carousel-0-1",
+      "key": "carousel-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "carousel-0-2",
+      "key": "carousel-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Carousel
+  size="sm"
+  title="Compact Carousel"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "carousel-1-1",
+      "key": "carousel-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "carousel-1-2",
+      "key": "carousel-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Carousel
+  size="lg"
+  title="Advanced Carousel"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "carousel-2-1",
+      "key": "carousel-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "carousel-2-2",
+      "key": "carousel-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Carousel"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/chart.wrn b/app/pages/components/chart.wrn new file mode 100644 index 0000000..502fd9a --- /dev/null +++ b/app/pages/components/chart.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ChartDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Chart example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default chart for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"chart-0-1\",\n \"key\": \"chart-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#chart-demo\",\n \"actionHref\": \"#chart-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"chart-0-2\",\n \"key\": \"chart-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#chart-demo\",\n \"actionHref\": \"#chart-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Chart" + description = "Theme-aware, responsive chart component." + } + view { + +
+
+ Integrations component +

Chart

+

Theme-aware, responsive chart component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Chart

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Chart
+  title="Chart example"
+  description="A polished default chart for a modern application."
+  items='[
+    {
+      "id": "chart-0-1",
+      "key": "chart-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#chart-demo",
+      "actionHref": "#chart-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "chart-0-2",
+      "key": "chart-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#chart-demo",
+      "actionHref": "#chart-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Chart
+  title="Chart example"
+  description="A polished default chart for a modern application."
+  items='[
+    {
+      "id": "chart-0-1",
+      "key": "chart-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#chart-demo",
+      "actionHref": "#chart-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "chart-0-2",
+      "key": "chart-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#chart-demo",
+      "actionHref": "#chart-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Chart
+  size="sm"
+  title="Compact Chart"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "chart-1-1",
+      "key": "chart-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#chart-demo",
+      "actionHref": "#chart-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "chart-1-2",
+      "key": "chart-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#chart-demo",
+      "actionHref": "#chart-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Chart
+  size="lg"
+  title="Advanced Chart"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "chart-2-1",
+      "key": "chart-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#chart-demo",
+      "actionHref": "#chart-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "chart-2-2",
+      "key": "chart-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#chart-demo",
+      "actionHref": "#chart-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Chart"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/chat-bubble.wrn b/app/pages/components/chat-bubble.wrn new file mode 100644 index 0000000..8752b09 --- /dev/null +++ b/app/pages/components/chat-bubble.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ChatBubbleDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Chat Bubble example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default chat bubble for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"chat-bubble-0-1\",\n \"key\": \"chat-bubble-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#chat-bubble-demo\",\n \"actionHref\": \"#chat-bubble-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"chat-bubble-0-2\",\n \"key\": \"chat-bubble-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#chat-bubble-demo\",\n \"actionHref\": \"#chat-bubble-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Chat Bubble" + description = "Theme-aware, responsive chat bubble component." + } + view { + +
+
+ Base component +

Chat Bubble

+

Theme-aware, responsive chat bubble component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Chat Bubble

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<ChatBubble
+  title="Chat Bubble example"
+  description="A polished default chat bubble for a modern application."
+  items='[
+    {
+      "id": "chat-bubble-0-1",
+      "key": "chat-bubble-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "chat-bubble-0-2",
+      "key": "chat-bubble-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ChatBubble
+  title="Chat Bubble example"
+  description="A polished default chat bubble for a modern application."
+  items='[
+    {
+      "id": "chat-bubble-0-1",
+      "key": "chat-bubble-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "chat-bubble-0-2",
+      "key": "chat-bubble-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ChatBubble
+  size="sm"
+  title="Compact Chat Bubble"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "chat-bubble-1-1",
+      "key": "chat-bubble-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "chat-bubble-1-2",
+      "key": "chat-bubble-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ChatBubble
+  size="lg"
+  title="Advanced Chat Bubble"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "chat-bubble-2-1",
+      "key": "chat-bubble-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "chat-bubble-2-2",
+      "key": "chat-bubble-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Chat Bubble"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/checkbox.wrn b/app/pages/components/checkbox.wrn new file mode 100644 index 0000000..263972d --- /dev/null +++ b/app/pages/components/checkbox.wrn @@ -0,0 +1,122 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page CheckboxDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Checkbox" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_checked = ctx.url.searchParams.get("pg_checked") ?? "false" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Checkbox" + description = "Theme-aware, responsive checkbox component." + } + view { + +
+
+ Forms component +

Checkbox

+

Theme-aware, responsive checkbox component.

+
8 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Checkbox

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Checkbox
+  value="sample-1"
+/>
+
+
+
+
+
Component props8 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Checkbox
+  value="sample-1"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Checkbox
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Checkbox
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Checkbox"No
namestring""No
valuestring"on"No
checkedbooleanfalseNo
disabledbooleanfalseNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/clipboard.wrn b/app/pages/components/clipboard.wrn new file mode 100644 index 0000000..d59678c --- /dev/null +++ b/app/pages/components/clipboard.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ClipboardDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Clipboard example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default clipboard for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"clipboard-0-1\",\n \"key\": \"clipboard-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#clipboard-demo\",\n \"actionHref\": \"#clipboard-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"clipboard-0-2\",\n \"key\": \"clipboard-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#clipboard-demo\",\n \"actionHref\": \"#clipboard-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Clipboard" + description = "Theme-aware, responsive clipboard component." + } + view { + +
+
+ Integrations component +

Clipboard

+

Theme-aware, responsive clipboard component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Clipboard

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Clipboard
+  title="Clipboard example"
+  description="A polished default clipboard for a modern application."
+  items='[
+    {
+      "id": "clipboard-0-1",
+      "key": "clipboard-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#clipboard-demo",
+      "actionHref": "#clipboard-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "clipboard-0-2",
+      "key": "clipboard-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#clipboard-demo",
+      "actionHref": "#clipboard-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Clipboard
+  title="Clipboard example"
+  description="A polished default clipboard for a modern application."
+  items='[
+    {
+      "id": "clipboard-0-1",
+      "key": "clipboard-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#clipboard-demo",
+      "actionHref": "#clipboard-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "clipboard-0-2",
+      "key": "clipboard-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#clipboard-demo",
+      "actionHref": "#clipboard-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Clipboard
+  size="sm"
+  title="Compact Clipboard"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "clipboard-1-1",
+      "key": "clipboard-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#clipboard-demo",
+      "actionHref": "#clipboard-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "clipboard-1-2",
+      "key": "clipboard-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#clipboard-demo",
+      "actionHref": "#clipboard-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Clipboard
+  size="lg"
+  title="Advanced Clipboard"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "clipboard-2-1",
+      "key": "clipboard-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#clipboard-demo",
+      "actionHref": "#clipboard-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "clipboard-2-2",
+      "key": "clipboard-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#clipboard-demo",
+      "actionHref": "#clipboard-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Clipboard"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/collapse.wrn b/app/pages/components/collapse.wrn new file mode 100644 index 0000000..6f86d73 --- /dev/null +++ b/app/pages/components/collapse.wrn @@ -0,0 +1,652 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page CollapseDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"collapse-0-1\",\n \"key\": \"collapse-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#collapse-demo\",\n \"actionHref\": \"#collapse-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"collapse-0-2\",\n \"key\": \"collapse-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#collapse-demo\",\n \"actionHref\": \"#collapse-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Collapse" + description = "Theme-aware, responsive collapse component." + } + view { + +
+
+ Base component +

Collapse

+

Theme-aware, responsive collapse component.

+
5 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Collapse

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Collapse
+  items='[
+    {
+      "id": "collapse-0-1",
+      "key": "collapse-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#collapse-demo",
+      "actionHref": "#collapse-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "collapse-0-2",
+      "key": "collapse-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#collapse-demo",
+      "actionHref": "#collapse-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props5 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Collapse
+  items='[
+    {
+      "id": "collapse-0-1",
+      "key": "collapse-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#collapse-demo",
+      "actionHref": "#collapse-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "collapse-0-2",
+      "key": "collapse-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#collapse-demo",
+      "actionHref": "#collapse-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Collapse
+  size="sm"
+  items='[
+    {
+      "id": "collapse-1-1",
+      "key": "collapse-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#collapse-demo",
+      "actionHref": "#collapse-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "collapse-1-2",
+      "key": "collapse-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#collapse-demo",
+      "actionHref": "#collapse-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Collapse
+  size="lg"
+  items='[
+    {
+      "id": "collapse-2-1",
+      "key": "collapse-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#collapse-demo",
+      "actionHref": "#collapse-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "collapse-2-2",
+      "key": "collapse-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#collapse-demo",
+      "actionHref": "#collapse-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
itemsstring[]No
multiplebooleanfalseNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/color-picker.wrn b/app/pages/components/color-picker.wrn new file mode 100644 index 0000000..545098c --- /dev/null +++ b/app/pages/components/color-picker.wrn @@ -0,0 +1,131 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ColorPickerDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Color Picker" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "color" + state playground_min = ctx.url.searchParams.get("pg_min") ?? "" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "" + state playground_step = ctx.url.searchParams.get("pg_step") ?? "" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Color Picker" + description = "Theme-aware, responsive color picker component." + } + view { + +
+
+ Forms component +

Color Picker

+

Theme-aware, responsive color picker component.

+
13 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Color Picker

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<ColorPicker
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
Component props13 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ColorPicker
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ColorPicker
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ColorPicker
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Color Picker"No
namestring""No
valuestring""No
placeholderstring""No
typestring"color"No
minstring""No
maxstring""No
stepstring""No
disabledbooleanfalseNo
requiredbooleanfalseNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/columns.wrn b/app/pages/components/columns.wrn new file mode 100644 index 0000000..3330365 --- /dev/null +++ b/app/pages/components/columns.wrn @@ -0,0 +1,112 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ColumnsDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "2" + state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md" + state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Columns" + description = "Theme-aware, responsive columns component." + } + view { + +
+
+ Layout component +

Columns

+

Theme-aware, responsive columns component.

+
6 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Columns

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Columns />
+
+
+
+
+
Component props6 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Columns />
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Columns
+  size="sm"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Columns
+  size="lg"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
columnsnumber2No
gapstring"md"No
maxWidthstring"xl"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/combo-box.wrn b/app/pages/components/combo-box.wrn new file mode 100644 index 0000000..47d1d85 --- /dev/null +++ b/app/pages/components/combo-box.wrn @@ -0,0 +1,1343 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ComboBoxDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Default autocomplete" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "combobox-1" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "" + state playground_options = ctx.url.searchParams.get("pg_options") ?? "[\n {\n \"value\": \"design\",\n \"label\": \"Design\",\n \"description\": \"Product and visual design\",\n \"icon\": \"icon-[lucide--palette]\",\n \"color\": \"#8b5cf6\",\n \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E\"\n },\n {\n \"value\": \"engineering\",\n \"label\": \"Engineering\",\n \"description\": \"Platform and application engineering\",\n \"icon\": \"icon-[lucide--code-2]\",\n \"color\": \"#0ea5e9\",\n \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E\"\n },\n {\n \"value\": \"growth\",\n \"label\": \"Growth\",\n \"description\": \"Marketing and customer growth\",\n \"icon\": \"icon-[lucide--trending-up]\",\n \"color\": \"#10b981\",\n \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E\"\n },\n {\n \"value\": \"support\",\n \"label\": \"Support\",\n \"description\": \"Customer operations\",\n \"icon\": \"icon-[lucide--life-buoy]\",\n \"color\": \"#f59e0b\"\n }\n]" + state playground_groups = ctx.url.searchParams.get("pg_groups") ?? "[]" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Search teams" + state playground_searchPlaceholder = ctx.url.searchParams.get("pg_searchPlaceholder") ?? "Start typing…" + state playground_clearable = ctx.url.searchParams.get("pg_clearable") ?? "true" + state playground_allowCustomValue = ctx.url.searchParams.get("pg_allowCustomValue") ?? "false" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false" + state playground_validationMessage = ctx.url.searchParams.get("pg_validationMessage") ?? "" + state playground_helpText = ctx.url.searchParams.get("pg_helpText") ?? "" + state playground_loading = ctx.url.searchParams.get("pg_loading") ?? "false" + state playground_loadingLabel = ctx.url.searchParams.get("pg_loadingLabel") ?? "Loading suggestions…" + state playground_emptyLabel = ctx.url.searchParams.get("pg_emptyLabel") ?? "No matching options" + state playground_clearLabel = ctx.url.searchParams.get("pg_clearLabel") ?? "Clear value" + state playground_toggleLabel = ctx.url.searchParams.get("pg_toggleLabel") ?? "Toggle suggestions" + state playground_searchMode = ctx.url.searchParams.get("pg_searchMode") ?? "contains" + state playground_searchFields = ctx.url.searchParams.get("pg_searchFields") ?? "label,description" + state playground_minSearchLength = ctx.url.searchParams.get("pg_minSearchLength") ?? "0" + state playground_searchResultLimit = ctx.url.searchParams.get("pg_searchResultLimit") ?? "0" + state playground_optionTemplate = ctx.url.searchParams.get("pg_optionTemplate") ?? "default" + state playground_defaultOpen = ctx.url.searchParams.get("pg_defaultOpen") ?? "false" + state playground_closeOnSelect = ctx.url.searchParams.get("pg_closeOnSelect") ?? "true" + state playground_fixed = ctx.url.searchParams.get("pg_fixed") ?? "false" + state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom" + state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "off" + state playground_remote = ctx.url.searchParams.get("pg_remote") ?? "false" + state playground_remoteUrl = ctx.url.searchParams.get("pg_remoteUrl") ?? "" + state playground_remoteQueryParam = ctx.url.searchParams.get("pg_remoteQueryParam") ?? "q" + state playground_remoteDebounce = ctx.url.searchParams.get("pg_remoteDebounce") ?? "250" + state playground_remoteAutoLoad = ctx.url.searchParams.get("pg_remoteAutoLoad") ?? "true" + state playground_infinite = ctx.url.searchParams.get("pg_infinite") ?? "false" + state playground_hasMore = ctx.url.searchParams.get("pg_hasMore") ?? "false" + state playground_page = ctx.url.searchParams.get("pg_page") ?? "1" + state playground_loadMoreLabel = ctx.url.searchParams.get("pg_loadMoreLabel") ?? "Load more" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "" + seo { + title = "Combo Box" + description = "Editable autocomplete combobox with local and remote suggestions." + } + view { + +
+
+ Advanced Forms component +

Combo Box

+

Editable autocomplete combobox with local and remote suggestions.

+
41 props0 slots8 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Combo Box

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<ComboBox
+  label="Default autocomplete"
+  name="combobox-1"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+/>
+
+
+
+
+
Component props41 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Autocomplete

Default autocomplete

Live default autocomplete combobox with editable autocomplete and copyable component code.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ComboBox
+  label="Default autocomplete"
+  name="combobox-1"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+/>
+
+
+
+
+
+
Autocomplete

Local HTML options

Live local html options combobox with editable autocomplete and copyable component code.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ComboBox
+  label="Local HTML options"
+  name="combobox-2"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+/>
+
+
+
+
+
+
Autocomplete

Grouped suggestions

Live grouped suggestions combobox with editable autocomplete and copyable component code.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ComboBox
+  label="Grouped suggestions"
+  name="combobox-3"
+  options='[]'
+  groups='[
+    {
+      "label": "Product",
+      "options": [
+        {
+          "value": "design",
+          "label": "Design",
+          "description": "Product and visual design",
+          "icon": "icon-[lucide--palette]",
+          "color": "#8b5cf6",
+          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+        },
+        {
+          "value": "engineering",
+          "label": "Engineering",
+          "description": "Platform and application engineering",
+          "icon": "icon-[lucide--code-2]",
+          "color": "#0ea5e9",
+          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+        }
+      ]
+    },
+    {
+      "label": "Business",
+      "options": [
+        {
+          "value": "growth",
+          "label": "Growth",
+          "description": "Marketing and customer growth",
+          "icon": "icon-[lucide--trending-up]",
+          "color": "#10b981",
+          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+        },
+        {
+          "value": "support",
+          "label": "Support",
+          "description": "Customer operations",
+          "icon": "icon-[lucide--life-buoy]",
+          "color": "#f59e0b"
+        }
+      ]
+    }
+  ]'
+  placeholder="Search teams"
+/>
+
+
+
+
+
+
Autocomplete

Minimum search length

Live minimum search length combobox with editable autocomplete and copyable component code.

+ 04 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ComboBox
+  label="Minimum search length"
+  name="combobox-4"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+  minSearchLength="3"
+/>
+
+
+
+
+
+
Autocomplete

Search result limit

Live search result limit combobox with editable autocomplete and copyable component code.

+ 05 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ComboBox
+  label="Search result limit"
+  name="combobox-5"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+  searchResultLimit="2"
+/>
+
+
+
+
+
+
Autocomplete

Starts-with matching

Live starts-with matching combobox with editable autocomplete and copyable component code.

+ 06 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ComboBox
+  label="Starts-with matching"
+  name="combobox-6"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+  searchMode="startsWith"
+/>
+
+
+
+
+
+
Autocomplete

Search labels and descriptions

Live search labels and descriptions combobox with editable autocomplete and copyable component code.

+ 07 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ComboBox
+  label="Search labels and descriptions"
+  name="combobox-7"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+/>
+
+
+
+
+
+
Templates & states

Suggestions with icons

Live suggestions with icons combobox with editable autocomplete and copyable component code.

+ 08 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ComboBox
+  label="Suggestions with icons"
+  name="combobox-8"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+  optionTemplate="icon"
+/>
+
+
+
+
+
+
Templates & states

Suggestions with avatars

Live suggestions with avatars combobox with editable autocomplete and copyable component code.

+ 09 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ComboBox
+  label="Suggestions with avatars"
+  name="combobox-9"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+  optionTemplate="avatar"
+/>
+
+
+
+
+
+
Templates & states

Suggestions with color indicators

Live suggestions with color indicators combobox with editable autocomplete and copyable component code.

+ 010 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ComboBox
+  label="Suggestions with color indicators"
+  name="combobox-10"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+  optionTemplate="color"
+/>
+
+
+
+
+
+
Templates & states

Clearable value

Live clearable value combobox with editable autocomplete and copyable component code.

+ 011 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ComboBox
+  label="Clearable value"
+  name="combobox-11"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+/>
+
+
+
+
+
+
Templates & states

Custom text values

Live custom text values combobox with editable autocomplete and copyable component code.

+ 012 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ComboBox
+  label="Custom text values"
+  name="combobox-12"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+  allowCustomValue="true"
+/>
+
+
+
+
+
+
Templates & states

Preselected value

Live preselected value combobox with editable autocomplete and copyable component code.

+ 013 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ComboBox
+  label="Preselected value"
+  name="combobox-13"
+  value="engineering"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+/>
+
+
+
+
+
+
Templates & states

Disabled combobox

Live disabled combobox combobox with editable autocomplete and copyable component code.

+ 014 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ComboBox
+  label="Disabled combobox"
+  name="combobox-14"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+  disabled="true"
+/>
+
+
+
+
+
+
Templates & states

Validation state

Live validation state combobox with editable autocomplete and copyable component code.

+ 015 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ComboBox
+  label="Validation state"
+  name="combobox-15"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+  required="true"
+/>
+
+
+
+
+
+
Remote & API

Remote data with automatic preload

Live remote data with automatic preload combobox with editable autocomplete and copyable component code.

+ 016 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ComboBox
+  label="Remote data with automatic preload"
+  name="combobox-16"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search remote teams"
+  minSearchLength="2"
+  remote="true"
+  remoteUrl="/api/teams"
+/>
+
+
+
+
+
+
Remote & API

Remote search API

Live remote search api combobox with editable autocomplete and copyable component code.

+ 017 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ComboBox
+  label="Remote search API"
+  name="combobox-17"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search remote teams"
+  minSearchLength="2"
+  remote="true"
+  remoteUrl="/api/teams"
+/>
+
+
+
+
+
+
Remote & API

Remote query parameters

Live remote query parameters combobox with editable autocomplete and copyable component code.

+ 018 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ComboBox
+  label="Remote query parameters"
+  name="combobox-18"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search remote teams"
+  minSearchLength="2"
+  remote="true"
+  remoteUrl="/api/teams"
+/>
+
+
+
+
+
+
Remote & API

Infinite remote suggestions

Live infinite remote suggestions combobox with editable autocomplete and copyable component code.

+ 019 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ComboBox
+  label="Infinite remote suggestions"
+  name="combobox-19"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search remote teams"
+  minSearchLength="2"
+  remote="true"
+  remoteUrl="/api/teams"
+  infinite="true"
+  hasMore="true"
+/>
+
+
+
+
+
+
Remote & API

Fixed-position suggestions

Live fixed-position suggestions combobox with editable autocomplete and copyable component code.

+ 020 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ComboBox
+  label="Fixed-position suggestions"
+  name="combobox-20"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+  fixed="true"
+/>
+
+
+
+
+
+
Remote & API

JavaScript methods

Live javascript methods combobox with editable autocomplete and copyable component code.

+ 021 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ComboBox
+  label="JavaScript methods"
+  name="combobox-21"
+  options='[
+    {
+      "value": "design",
+      "label": "Design",
+      "description": "Product and visual design",
+      "icon": "icon-[lucide--palette]",
+      "color": "#8b5cf6",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "engineering",
+      "label": "Engineering",
+      "description": "Platform and application engineering",
+      "icon": "icon-[lucide--code-2]",
+      "color": "#0ea5e9",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "growth",
+      "label": "Growth",
+      "description": "Marketing and customer growth",
+      "icon": "icon-[lucide--trending-up]",
+      "color": "#10b981",
+      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
+    },
+    {
+      "value": "support",
+      "label": "Support",
+      "description": "Customer operations",
+      "icon": "icon-[lucide--life-buoy]",
+      "color": "#f59e0b"
+    }
+  ]'
+  groups='[]'
+  placeholder="Search teams"
+/>
+
+
+
+
Component events

Respond to every interaction

Events are declared with @event, bubble from the component root, and expose their state through event.detail.

@searchFires whenever the autocomplete query changes.
@selectFires after an option is selected by pointer or keyboard.
@changeFires when the selected value changes or is cleared.
@clearFires after the current selection is cleared.
@openFires when the suggestion dropdown opens.
@closeFires when the suggestion dropdown closes.
@loadFires after a remote request succeeds.
@errorFires when a remote request fails.
Event listeners.js
const component = document.querySelector("[data-wrn-combobox]")
+
+component.addEventListener("select", (event) => {
+  console.log(event.detail.value)
+  console.log(event.detail.complete)
+})
+
+component.addEventListener("load", (event) => {
+  console.log(event.detail)
+})
+
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"ComboBox"No
namestring""No
valuestring""No
optionsstring[]No
groupsstring[]No
placeholderstring"Search or select an option"No
searchPlaceholderstring"Start typing…"No
clearablebooleantrueNo
allowCustomValuebooleanfalseNo
disabledbooleanfalseNo
requiredbooleanfalseNo
invalidbooleanfalseNo
validationMessagestring""No
helpTextstring""No
loadingbooleanfalseNo
loadingLabelstring"Loading suggestions…"No
emptyLabelstring"No matching options"No
clearLabelstring"Clear value"No
toggleLabelstring"Toggle suggestions"No
searchModestring"contains"No
searchFieldsstring"label,description"No
minSearchLengthnumber0No
searchResultLimitnumber0No
optionTemplatestring"default"No
defaultOpenbooleanfalseNo
closeOnSelectbooleantrueNo
fixedbooleanfalseNo
placementstring"bottom"No
autocompletestring"off"No
remotebooleanfalseNo
remoteUrlstring""No
remoteQueryParamstring"q"No
remoteDebouncenumber250No
remoteAutoLoadbooleantrueNo
infinitebooleanfalseNo
hasMorebooleanfalseNo
pagenumber1No
loadMoreLabelstring"Load more"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/confetti.wrn b/app/pages/components/confetti.wrn new file mode 100644 index 0000000..288d4e8 --- /dev/null +++ b/app/pages/components/confetti.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ConfettiDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Confetti example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default confetti for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"confetti-0-1\",\n \"key\": \"confetti-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#confetti-demo\",\n \"actionHref\": \"#confetti-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"confetti-0-2\",\n \"key\": \"confetti-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#confetti-demo\",\n \"actionHref\": \"#confetti-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Confetti" + description = "Theme-aware, responsive confetti component." + } + view { + +
+
+ Integrations component +

Confetti

+

Theme-aware, responsive confetti component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Confetti

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Confetti
+  title="Confetti example"
+  description="A polished default confetti for a modern application."
+  items='[
+    {
+      "id": "confetti-0-1",
+      "key": "confetti-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#confetti-demo",
+      "actionHref": "#confetti-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "confetti-0-2",
+      "key": "confetti-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#confetti-demo",
+      "actionHref": "#confetti-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Confetti
+  title="Confetti example"
+  description="A polished default confetti for a modern application."
+  items='[
+    {
+      "id": "confetti-0-1",
+      "key": "confetti-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#confetti-demo",
+      "actionHref": "#confetti-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "confetti-0-2",
+      "key": "confetti-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#confetti-demo",
+      "actionHref": "#confetti-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Confetti
+  size="sm"
+  title="Compact Confetti"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "confetti-1-1",
+      "key": "confetti-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#confetti-demo",
+      "actionHref": "#confetti-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "confetti-1-2",
+      "key": "confetti-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#confetti-demo",
+      "actionHref": "#confetti-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Confetti
+  size="lg"
+  title="Advanced Confetti"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "confetti-2-1",
+      "key": "confetti-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#confetti-demo",
+      "actionHref": "#confetti-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "confetti-2-2",
+      "key": "confetti-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#confetti-demo",
+      "actionHref": "#confetti-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Confetti"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/container.wrn b/app/pages/components/container.wrn new file mode 100644 index 0000000..4873c45 --- /dev/null +++ b/app/pages/components/container.wrn @@ -0,0 +1,118 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ContainerDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "2" + state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md" + state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Container" + description = "Theme-aware, responsive container component." + } + view { + +
+
+ Layout component +

Container

+

Theme-aware, responsive container component.

+
6 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Container

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
Composable content area.
+
+
Component code
+ 
<Container>
+  <!-- Add default slot content here -->
+</Container>
+
+
+
+
+
Component props6 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
Composable content area.
+
+
+
Component usage.wrn
+ 
<Container>
+  <!-- Add default slot content here -->
+</Container>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
Composable content area.
+
+
+
Component usage.wrn
+ 
<Container
+  size="sm">
+  <!-- Add default slot content here -->
+</Container>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
Rich supporting content with additional context.
+
+
+
Component usage.wrn
+ 
<Container
+  size="lg">
+  <!-- Add default slot content here -->
+</Container>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
columnsnumber2No
gapstring"md"No
maxWidthstring"xl"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/context-menu.wrn b/app/pages/components/context-menu.wrn new file mode 100644 index 0000000..dbfc82f --- /dev/null +++ b/app/pages/components/context-menu.wrn @@ -0,0 +1,132 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ContextMenuDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Context Menu example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default context menu for a modern application." + state playground_open = ctx.url.searchParams.get("pg_open") ?? "true" + state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom" + state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Context Menu" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Context Menu" + description = "Theme-aware, responsive context menu component." + } + view { + +
+
+ Overlays component +

Context Menu

+

Theme-aware, responsive context menu component.

+
8 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Context Menu

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<ContextMenu
+  title="Context Menu example"
+  description="A polished default context menu for a modern application."
+  open="true"
+  closeLabel="Context Menu"
+/>
+
+
+
+
+
Component props8 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ContextMenu
+  title="Context Menu example"
+  description="A polished default context menu for a modern application."
+  open="true"
+  closeLabel="Context Menu"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ContextMenu
+  size="sm"
+  title="Compact Context Menu"
+  description="A compact configuration for dashboards and dense product surfaces."
+  open="true"
+  closeLabel="Compact example"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ContextMenu
+  size="lg"
+  title="Advanced Context Menu"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  open="true"
+  closeLabel="Advanced example"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Context Menu"No
descriptionstring""No
openbooleanfalseNo
placementstring"bottom"No
closeLabelstring"Close"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/copy-markup.wrn b/app/pages/components/copy-markup.wrn new file mode 100644 index 0000000..67864d6 --- /dev/null +++ b/app/pages/components/copy-markup.wrn @@ -0,0 +1,131 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page CopyMarkupDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Copy Markup" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "text" + state playground_min = ctx.url.searchParams.get("pg_min") ?? "" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "" + state playground_step = ctx.url.searchParams.get("pg_step") ?? "" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Copy Markup" + description = "Theme-aware, responsive copy markup component." + } + view { + +
+
+ Advanced Forms component +

Copy Markup

+

Theme-aware, responsive copy markup component.

+
13 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Copy Markup

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<CopyMarkup
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
Component props13 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<CopyMarkup
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<CopyMarkup
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<CopyMarkup
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Copy Markup"No
namestring""No
valuestring""No
placeholderstring""No
typestring"text"No
minstring""No
maxstring""No
stepstring""No
disabledbooleanfalseNo
requiredbooleanfalseNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/custom-scrollbar.wrn b/app/pages/components/custom-scrollbar.wrn new file mode 100644 index 0000000..a9adb12 --- /dev/null +++ b/app/pages/components/custom-scrollbar.wrn @@ -0,0 +1,112 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page CustomScrollbarDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "2" + state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md" + state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Custom Scrollbar" + description = "Theme-aware, responsive custom scrollbar component." + } + view { + +
+
+ Layout component +

Custom Scrollbar

+

Theme-aware, responsive custom scrollbar component.

+
6 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Custom Scrollbar

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<CustomScrollbar />
+
+
+
+
+
Component props6 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<CustomScrollbar />
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<CustomScrollbar
+  size="sm"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<CustomScrollbar
+  size="lg"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
columnsnumber2No
gapstring"md"No
maxWidthstring"xl"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/data-map.wrn b/app/pages/components/data-map.wrn new file mode 100644 index 0000000..9baf8b2 --- /dev/null +++ b/app/pages/components/data-map.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page DataMapDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Data Map example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default data map for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"data-map-0-1\",\n \"key\": \"data-map-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#data-map-demo\",\n \"actionHref\": \"#data-map-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"data-map-0-2\",\n \"key\": \"data-map-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#data-map-demo\",\n \"actionHref\": \"#data-map-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Data Map" + description = "Theme-aware, responsive data map component." + } + view { + +
+
+ Integrations component +

Data Map

+

Theme-aware, responsive data map component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Data Map

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<DataMap
+  title="Data Map example"
+  description="A polished default data map for a modern application."
+  items='[
+    {
+      "id": "data-map-0-1",
+      "key": "data-map-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#data-map-demo",
+      "actionHref": "#data-map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "data-map-0-2",
+      "key": "data-map-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#data-map-demo",
+      "actionHref": "#data-map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<DataMap
+  title="Data Map example"
+  description="A polished default data map for a modern application."
+  items='[
+    {
+      "id": "data-map-0-1",
+      "key": "data-map-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#data-map-demo",
+      "actionHref": "#data-map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "data-map-0-2",
+      "key": "data-map-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#data-map-demo",
+      "actionHref": "#data-map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<DataMap
+  size="sm"
+  title="Compact Data Map"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "data-map-1-1",
+      "key": "data-map-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#data-map-demo",
+      "actionHref": "#data-map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "data-map-1-2",
+      "key": "data-map-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#data-map-demo",
+      "actionHref": "#data-map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<DataMap
+  size="lg"
+  title="Advanced Data Map"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "data-map-2-1",
+      "key": "data-map-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#data-map-demo",
+      "actionHref": "#data-map-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "data-map-2-2",
+      "key": "data-map-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#data-map-demo",
+      "actionHref": "#data-map-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Data Map"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/data-table.wrn b/app/pages/components/data-table.wrn new file mode 100644 index 0000000..a7486fc --- /dev/null +++ b/app/pages/components/data-table.wrn @@ -0,0 +1,1193 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page DataTableDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_caption = ctx.url.searchParams.get("pg_caption") ?? "Data Table" + state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "[\n {\n \"id\": \"data-table-0-1\",\n \"key\": \"data-table-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#data-table-demo\",\n \"actionHref\": \"#data-table-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"data-table-0-2\",\n \"key\": \"data-table-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#data-table-demo\",\n \"actionHref\": \"#data-table-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_rows = ctx.url.searchParams.get("pg_rows") ?? "[\n {\n \"id\": \"data-table-0-1\",\n \"key\": \"data-table-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#data-table-demo\",\n \"actionHref\": \"#data-table-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"data-table-0-2\",\n \"key\": \"data-table-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#data-table-demo\",\n \"actionHref\": \"#data-table-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_striped = ctx.url.searchParams.get("pg_striped") ?? "true" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Data Table" + description = "Theme-aware, responsive data table component." + } + view { + +
+
+ Integrations component +

Data Table

+

Theme-aware, responsive data table component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Data Table

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<DataTable
+  columns='[
+    {
+      "id": "data-table-0-1",
+      "key": "data-table-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "data-table-0-2",
+      "key": "data-table-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  rows='[
+    {
+      "id": "data-table-0-1",
+      "key": "data-table-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "data-table-0-2",
+      "key": "data-table-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<DataTable
+  columns='[
+    {
+      "id": "data-table-0-1",
+      "key": "data-table-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "data-table-0-2",
+      "key": "data-table-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  rows='[
+    {
+      "id": "data-table-0-1",
+      "key": "data-table-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "data-table-0-2",
+      "key": "data-table-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<DataTable
+  size="sm"
+  columns='[
+    {
+      "id": "data-table-1-1",
+      "key": "data-table-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "data-table-1-2",
+      "key": "data-table-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  rows='[
+    {
+      "id": "data-table-1-1",
+      "key": "data-table-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "data-table-1-2",
+      "key": "data-table-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<DataTable
+  size="lg"
+  columns='[
+    {
+      "id": "data-table-2-1",
+      "key": "data-table-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "data-table-2-2",
+      "key": "data-table-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  rows='[
+    {
+      "id": "data-table-2-1",
+      "key": "data-table-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "data-table-2-2",
+      "key": "data-table-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#data-table-demo",
+      "actionHref": "#data-table-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
captionstring"Data Table"No
columnsstring[]No
rowsstring[]No
stripedbooleantrueNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/date-picker.wrn b/app/pages/components/date-picker.wrn new file mode 100644 index 0000000..eb9982d --- /dev/null +++ b/app/pages/components/date-picker.wrn @@ -0,0 +1,131 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page DatePickerDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Date Picker" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "date" + state playground_min = ctx.url.searchParams.get("pg_min") ?? "" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "" + state playground_step = ctx.url.searchParams.get("pg_step") ?? "" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Date Picker" + description = "Theme-aware, responsive date picker component." + } + view { + +
+
+ Base component +

Date Picker

+

Theme-aware, responsive date picker component.

+
13 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Date Picker

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<DatePicker
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
Component props13 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<DatePicker
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<DatePicker
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<DatePicker
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Date Picker"No
namestring""No
valuestring""No
placeholderstring""No
typestring"date"No
minstring""No
maxstring""No
stepstring""No
disabledbooleanfalseNo
requiredbooleanfalseNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/device-frame.wrn b/app/pages/components/device-frame.wrn new file mode 100644 index 0000000..0657cb4 --- /dev/null +++ b/app/pages/components/device-frame.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page DeviceFrameDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Device Frame example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default device frame for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"device-frame-0-1\",\n \"key\": \"device-frame-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#device-frame-demo\",\n \"actionHref\": \"#device-frame-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"device-frame-0-2\",\n \"key\": \"device-frame-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#device-frame-demo\",\n \"actionHref\": \"#device-frame-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Device Frame" + description = "Theme-aware, responsive device frame component." + } + view { + +
+
+ Base component +

Device Frame

+

Theme-aware, responsive device frame component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Device Frame

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<DeviceFrame
+  title="Device Frame example"
+  description="A polished default device frame for a modern application."
+  items='[
+    {
+      "id": "device-frame-0-1",
+      "key": "device-frame-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#device-frame-demo",
+      "actionHref": "#device-frame-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "device-frame-0-2",
+      "key": "device-frame-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#device-frame-demo",
+      "actionHref": "#device-frame-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<DeviceFrame
+  title="Device Frame example"
+  description="A polished default device frame for a modern application."
+  items='[
+    {
+      "id": "device-frame-0-1",
+      "key": "device-frame-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#device-frame-demo",
+      "actionHref": "#device-frame-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "device-frame-0-2",
+      "key": "device-frame-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#device-frame-demo",
+      "actionHref": "#device-frame-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<DeviceFrame
+  size="sm"
+  title="Compact Device Frame"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "device-frame-1-1",
+      "key": "device-frame-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#device-frame-demo",
+      "actionHref": "#device-frame-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "device-frame-1-2",
+      "key": "device-frame-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#device-frame-demo",
+      "actionHref": "#device-frame-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<DeviceFrame
+  size="lg"
+  title="Advanced Device Frame"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "device-frame-2-1",
+      "key": "device-frame-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#device-frame-demo",
+      "actionHref": "#device-frame-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "device-frame-2-2",
+      "key": "device-frame-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#device-frame-demo",
+      "actionHref": "#device-frame-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Device Frame"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/divider.wrn b/app/pages/components/divider.wrn new file mode 100644 index 0000000..991a0a7 --- /dev/null +++ b/app/pages/components/divider.wrn @@ -0,0 +1,117 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page DividerDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Divider" + state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Divider" + description = "Theme-aware, responsive divider component." + } + view { + +
+
+ Layout component +

Divider

+

Theme-aware, responsive divider component.

+
5 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Divider

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Divider
+  label="Divider"
+/>
+
+
+
+
+
Component props5 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Divider
+  label="Divider"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Divider
+  size="sm"
+  label="Compact example"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Divider
+  size="lg"
+  label="Advanced example"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring""No
orientationstring"horizontal"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/drag-and-drop.wrn b/app/pages/components/drag-and-drop.wrn new file mode 100644 index 0000000..f5ed4d8 --- /dev/null +++ b/app/pages/components/drag-and-drop.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page DragAndDropDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Drag And Drop example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default drag and drop for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"drag-and-drop-0-1\",\n \"key\": \"drag-and-drop-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#drag-and-drop-demo\",\n \"actionHref\": \"#drag-and-drop-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"drag-and-drop-0-2\",\n \"key\": \"drag-and-drop-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#drag-and-drop-demo\",\n \"actionHref\": \"#drag-and-drop-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Drag And Drop" + description = "Theme-aware, responsive drag and drop component." + } + view { + +
+
+ Integrations component +

Drag And Drop

+

Theme-aware, responsive drag and drop component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Drag And Drop

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<DragAndDrop
+  title="Drag And Drop example"
+  description="A polished default drag and drop for a modern application."
+  items='[
+    {
+      "id": "drag-and-drop-0-1",
+      "key": "drag-and-drop-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#drag-and-drop-demo",
+      "actionHref": "#drag-and-drop-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "drag-and-drop-0-2",
+      "key": "drag-and-drop-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#drag-and-drop-demo",
+      "actionHref": "#drag-and-drop-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<DragAndDrop
+  title="Drag And Drop example"
+  description="A polished default drag and drop for a modern application."
+  items='[
+    {
+      "id": "drag-and-drop-0-1",
+      "key": "drag-and-drop-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#drag-and-drop-demo",
+      "actionHref": "#drag-and-drop-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "drag-and-drop-0-2",
+      "key": "drag-and-drop-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#drag-and-drop-demo",
+      "actionHref": "#drag-and-drop-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<DragAndDrop
+  size="sm"
+  title="Compact Drag And Drop"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "drag-and-drop-1-1",
+      "key": "drag-and-drop-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#drag-and-drop-demo",
+      "actionHref": "#drag-and-drop-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "drag-and-drop-1-2",
+      "key": "drag-and-drop-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#drag-and-drop-demo",
+      "actionHref": "#drag-and-drop-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<DragAndDrop
+  size="lg"
+  title="Advanced Drag And Drop"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "drag-and-drop-2-1",
+      "key": "drag-and-drop-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#drag-and-drop-demo",
+      "actionHref": "#drag-and-drop-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "drag-and-drop-2-2",
+      "key": "drag-and-drop-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#drag-and-drop-demo",
+      "actionHref": "#drag-and-drop-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Drag And Drop"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/drawer.wrn b/app/pages/components/drawer.wrn new file mode 100644 index 0000000..3170243 --- /dev/null +++ b/app/pages/components/drawer.wrn @@ -0,0 +1,132 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page DrawerDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Drawer example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default drawer for a modern application." + state playground_open = ctx.url.searchParams.get("pg_open") ?? "true" + state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom" + state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Drawer" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Drawer" + description = "Theme-aware, responsive drawer component." + } + view { + +
+
+ Overlays component +

Drawer

+

Theme-aware, responsive drawer component.

+
8 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Drawer

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Drawer
+  title="Drawer example"
+  description="A polished default drawer for a modern application."
+  open="true"
+  closeLabel="Drawer"
+/>
+
+
+
+
+
Component props8 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Drawer
+  title="Drawer example"
+  description="A polished default drawer for a modern application."
+  open="true"
+  closeLabel="Drawer"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Drawer
+  size="sm"
+  title="Compact Drawer"
+  description="A compact configuration for dashboards and dense product surfaces."
+  open="true"
+  closeLabel="Compact example"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Drawer
+  size="lg"
+  title="Advanced Drawer"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  open="true"
+  closeLabel="Advanced example"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Drawer"No
descriptionstring""No
openbooleanfalseNo
placementstring"bottom"No
closeLabelstring"Close"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/dropdown.wrn b/app/pages/components/dropdown.wrn new file mode 100644 index 0000000..d313f15 --- /dev/null +++ b/app/pages/components/dropdown.wrn @@ -0,0 +1,132 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page DropdownDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Dropdown example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default dropdown for a modern application." + state playground_open = ctx.url.searchParams.get("pg_open") ?? "true" + state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom" + state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Dropdown" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Dropdown" + description = "Theme-aware, responsive dropdown component." + } + view { + +
+
+ Overlays component +

Dropdown

+

Theme-aware, responsive dropdown component.

+
8 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Dropdown

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Dropdown
+  title="Dropdown example"
+  description="A polished default dropdown for a modern application."
+  open="true"
+  closeLabel="Dropdown"
+/>
+
+
+
+
+
Component props8 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Dropdown
+  title="Dropdown example"
+  description="A polished default dropdown for a modern application."
+  open="true"
+  closeLabel="Dropdown"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Dropdown
+  size="sm"
+  title="Compact Dropdown"
+  description="A compact configuration for dashboards and dense product surfaces."
+  open="true"
+  closeLabel="Compact example"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Dropdown
+  size="lg"
+  title="Advanced Dropdown"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  open="true"
+  closeLabel="Advanced example"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Dropdown"No
descriptionstring""No
openbooleanfalseNo
placementstring"bottom"No
closeLabelstring"Close"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/file-input.wrn b/app/pages/components/file-input.wrn new file mode 100644 index 0000000..e3ecfe4 --- /dev/null +++ b/app/pages/components/file-input.wrn @@ -0,0 +1,131 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page FileInputDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "File Input" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "file" + state playground_min = ctx.url.searchParams.get("pg_min") ?? "" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "" + state playground_step = ctx.url.searchParams.get("pg_step") ?? "" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "File Input" + description = "Theme-aware, responsive file input component." + } + view { + +
+
+ Forms component +

File Input

+

Theme-aware, responsive file input component.

+
13 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure File Input

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<FileInput
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
Component props13 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<FileInput
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<FileInput
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<FileInput
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"File Input"No
namestring""No
valuestring""No
placeholderstring""No
typestring"file"No
minstring""No
maxstring""No
stepstring""No
disabledbooleanfalseNo
requiredbooleanfalseNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/file-upload-progress.wrn b/app/pages/components/file-upload-progress.wrn new file mode 100644 index 0000000..a020c0b --- /dev/null +++ b/app/pages/components/file-upload-progress.wrn @@ -0,0 +1,123 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page FileUploadProgressDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "File Upload Progress" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "36" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "100" + state playground_showValue = ctx.url.searchParams.get("pg_showValue") ?? "true" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "File Upload Progress" + description = "Theme-aware, responsive file upload progress component." + } + view { + +
+
+ Base component +

File Upload Progress

+

Theme-aware, responsive file upload progress component.

+
7 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure File Upload Progress

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<FileUploadProgress
+  label="File Upload Progress"
+  value="36"
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<FileUploadProgress
+  label="File Upload Progress"
+  value="36"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<FileUploadProgress
+  size="sm"
+  label="Compact example"
+  value="60"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<FileUploadProgress
+  size="lg"
+  label="Advanced example"
+  value="84"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Progress"No
valuenumber50No
maxnumber100No
showValuebooleantrueNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/file-upload.wrn b/app/pages/components/file-upload.wrn new file mode 100644 index 0000000..35ab594 --- /dev/null +++ b/app/pages/components/file-upload.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page FileUploadDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "File Upload example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default file upload for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"file-upload-0-1\",\n \"key\": \"file-upload-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#file-upload-demo\",\n \"actionHref\": \"#file-upload-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"file-upload-0-2\",\n \"key\": \"file-upload-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#file-upload-demo\",\n \"actionHref\": \"#file-upload-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "File Upload" + description = "Theme-aware, responsive file upload component." + } + view { + +
+
+ Integrations component +

File Upload

+

Theme-aware, responsive file upload component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure File Upload

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<FileUpload
+  title="File Upload example"
+  description="A polished default file upload for a modern application."
+  items='[
+    {
+      "id": "file-upload-0-1",
+      "key": "file-upload-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#file-upload-demo",
+      "actionHref": "#file-upload-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "file-upload-0-2",
+      "key": "file-upload-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#file-upload-demo",
+      "actionHref": "#file-upload-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<FileUpload
+  title="File Upload example"
+  description="A polished default file upload for a modern application."
+  items='[
+    {
+      "id": "file-upload-0-1",
+      "key": "file-upload-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#file-upload-demo",
+      "actionHref": "#file-upload-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "file-upload-0-2",
+      "key": "file-upload-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#file-upload-demo",
+      "actionHref": "#file-upload-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<FileUpload
+  size="sm"
+  title="Compact File Upload"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "file-upload-1-1",
+      "key": "file-upload-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#file-upload-demo",
+      "actionHref": "#file-upload-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "file-upload-1-2",
+      "key": "file-upload-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#file-upload-demo",
+      "actionHref": "#file-upload-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<FileUpload
+  size="lg"
+  title="Advanced File Upload"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "file-upload-2-1",
+      "key": "file-upload-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#file-upload-demo",
+      "actionHref": "#file-upload-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "file-upload-2-2",
+      "key": "file-upload-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#file-upload-demo",
+      "actionHref": "#file-upload-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"File Upload"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/grid.wrn b/app/pages/components/grid.wrn new file mode 100644 index 0000000..ba071ed --- /dev/null +++ b/app/pages/components/grid.wrn @@ -0,0 +1,112 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page GridDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "2" + state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md" + state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Grid" + description = "Theme-aware, responsive grid component." + } + view { + +
+
+ Layout component +

Grid

+

Theme-aware, responsive grid component.

+
6 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Grid

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Grid />
+
+
+
+
+
Component props6 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Grid />
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Grid
+  size="sm"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Grid
+  size="lg"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
columnsnumber2No
gapstring"md"No
maxWidthstring"xl"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/image.wrn b/app/pages/components/image.wrn new file mode 100644 index 0000000..6833951 --- /dev/null +++ b/app/pages/components/image.wrn @@ -0,0 +1,115 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ImageDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_src = ctx.url.searchParams.get("pg_src") ?? "" + state playground_alt = ctx.url.searchParams.get("pg_alt") ?? "" + state playground_width = ctx.url.searchParams.get("pg_width") ?? "" + state playground_height = ctx.url.searchParams.get("pg_height") ?? "" + state playground_loading = ctx.url.searchParams.get("pg_loading") ?? "lazy" + state playground_rounded = ctx.url.searchParams.get("pg_rounded") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Image" + description = "Theme-aware, responsive image component." + } + view { + +
+
+ Layout component +

Image

+

Theme-aware, responsive image component.

+
9 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Image

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Image />
+
+
+
+
+
Component props9 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Image />
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Image
+  size="sm"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Image
+  size="lg"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
srcstring""No
altstring""No
widthstring""No
heightstring""No
loadingstring"lazy"No
roundedbooleanfalseNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/input-group.wrn b/app/pages/components/input-group.wrn new file mode 100644 index 0000000..6d2221d --- /dev/null +++ b/app/pages/components/input-group.wrn @@ -0,0 +1,131 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page InputGroupDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Input Group" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "text" + state playground_min = ctx.url.searchParams.get("pg_min") ?? "" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "" + state playground_step = ctx.url.searchParams.get("pg_step") ?? "" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Input Group" + description = "Theme-aware, responsive input group component." + } + view { + +
+
+ Forms component +

Input Group

+

Theme-aware, responsive input group component.

+
13 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Input Group

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<InputGroup
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
Component props13 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<InputGroup
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<InputGroup
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<InputGroup
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Input Group"No
namestring""No
valuestring""No
placeholderstring""No
typestring"text"No
minstring""No
maxstring""No
stepstring""No
disabledbooleanfalseNo
requiredbooleanfalseNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/input-number.wrn b/app/pages/components/input-number.wrn new file mode 100644 index 0000000..70e2861 --- /dev/null +++ b/app/pages/components/input-number.wrn @@ -0,0 +1,131 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page InputNumberDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Input Number" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "number" + state playground_min = ctx.url.searchParams.get("pg_min") ?? "" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "" + state playground_step = ctx.url.searchParams.get("pg_step") ?? "" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Input Number" + description = "Theme-aware, responsive input number component." + } + view { + +
+
+ Advanced Forms component +

Input Number

+

Theme-aware, responsive input number component.

+
13 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Input Number

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<InputNumber
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
Component props13 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<InputNumber
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<InputNumber
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<InputNumber
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Input Number"No
namestring""No
valuestring""No
placeholderstring""No
typestring"number"No
minstring""No
maxstring""No
stepstring""No
disabledbooleanfalseNo
requiredbooleanfalseNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/input.wrn b/app/pages/components/input.wrn new file mode 100644 index 0000000..2c87755 --- /dev/null +++ b/app/pages/components/input.wrn @@ -0,0 +1,131 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page InputDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Input" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "text" + state playground_min = ctx.url.searchParams.get("pg_min") ?? "" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "" + state playground_step = ctx.url.searchParams.get("pg_step") ?? "" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Input" + description = "Theme-aware, responsive input component." + } + view { + +
+
+ Forms component +

Input

+

Theme-aware, responsive input component.

+
13 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Input

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Input
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
Component props13 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Input
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Input
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Input
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Input"No
namestring""No
valuestring""No
placeholderstring""No
typestring"text"No
minstring""No
maxstring""No
stepstring""No
disabledbooleanfalseNo
requiredbooleanfalseNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/kbd.wrn b/app/pages/components/kbd.wrn new file mode 100644 index 0000000..4dec318 --- /dev/null +++ b/app/pages/components/kbd.wrn @@ -0,0 +1,116 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page KbdDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Kbd" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Kbd" + description = "Theme-aware, responsive kbd component." + } + view { + +
+
+ Layout component +

Kbd

+

Theme-aware, responsive kbd component.

+
4 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Kbd

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Kbd
+  label="Kbd"
+/>
+
+
+
+
+
Component props4 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Kbd
+  label="Kbd"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Kbd
+  size="sm"
+  label="Compact example"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Kbd
+  size="lg"
+  label="Advanced example"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"⌘ K"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/layout-splitter.wrn b/app/pages/components/layout-splitter.wrn new file mode 100644 index 0000000..b64aa71 --- /dev/null +++ b/app/pages/components/layout-splitter.wrn @@ -0,0 +1,112 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page LayoutSplitterDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "2" + state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md" + state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Layout Splitter" + description = "Theme-aware, responsive layout splitter component." + } + view { + +
+
+ Layout component +

Layout Splitter

+

Theme-aware, responsive layout splitter component.

+
6 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Layout Splitter

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<LayoutSplitter />
+
+
+
+
+
Component props6 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<LayoutSplitter />
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<LayoutSplitter
+  size="sm"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<LayoutSplitter
+  size="lg"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
columnsnumber2No
gapstring"md"No
maxWidthstring"xl"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/legend-indicator.wrn b/app/pages/components/legend-indicator.wrn new file mode 100644 index 0000000..fe5e701 --- /dev/null +++ b/app/pages/components/legend-indicator.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page LegendIndicatorDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Legend Indicator example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default legend indicator for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"legend-indicator-0-1\",\n \"key\": \"legend-indicator-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#legend-indicator-demo\",\n \"actionHref\": \"#legend-indicator-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"legend-indicator-0-2\",\n \"key\": \"legend-indicator-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#legend-indicator-demo\",\n \"actionHref\": \"#legend-indicator-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Legend Indicator" + description = "Theme-aware, responsive legend indicator component." + } + view { + +
+
+ Base component +

Legend Indicator

+

Theme-aware, responsive legend indicator component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Legend Indicator

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<LegendIndicator
+  title="Legend Indicator example"
+  description="A polished default legend indicator for a modern application."
+  items='[
+    {
+      "id": "legend-indicator-0-1",
+      "key": "legend-indicator-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#legend-indicator-demo",
+      "actionHref": "#legend-indicator-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "legend-indicator-0-2",
+      "key": "legend-indicator-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#legend-indicator-demo",
+      "actionHref": "#legend-indicator-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<LegendIndicator
+  title="Legend Indicator example"
+  description="A polished default legend indicator for a modern application."
+  items='[
+    {
+      "id": "legend-indicator-0-1",
+      "key": "legend-indicator-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#legend-indicator-demo",
+      "actionHref": "#legend-indicator-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "legend-indicator-0-2",
+      "key": "legend-indicator-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#legend-indicator-demo",
+      "actionHref": "#legend-indicator-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<LegendIndicator
+  size="sm"
+  title="Compact Legend Indicator"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "legend-indicator-1-1",
+      "key": "legend-indicator-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#legend-indicator-demo",
+      "actionHref": "#legend-indicator-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "legend-indicator-1-2",
+      "key": "legend-indicator-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#legend-indicator-demo",
+      "actionHref": "#legend-indicator-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<LegendIndicator
+  size="lg"
+  title="Advanced Legend Indicator"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "legend-indicator-2-1",
+      "key": "legend-indicator-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#legend-indicator-demo",
+      "actionHref": "#legend-indicator-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "legend-indicator-2-2",
+      "key": "legend-indicator-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#legend-indicator-demo",
+      "actionHref": "#legend-indicator-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Legend Indicator"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/link.wrn b/app/pages/components/link.wrn new file mode 100644 index 0000000..a011409 --- /dev/null +++ b/app/pages/components/link.wrn @@ -0,0 +1,122 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page LinkDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Link" + state playground_href = ctx.url.searchParams.get("pg_href") ?? "#link-demo" + state playground_target = ctx.url.searchParams.get("pg_target") ?? "" + state playground_rel = ctx.url.searchParams.get("pg_rel") ?? "" + state playground_external = ctx.url.searchParams.get("pg_external") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Link" + description = "Theme-aware, responsive link component." + } + view { + +
+
+ Layout component +

Link

+

Theme-aware, responsive link component.

+
8 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Link

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Link
+  href="#link-demo"
+/>
+
+
+
+
+
Component props8 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Link
+  href="#link-demo"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Link
+  size="sm"
+  label="Compact example"
+  href="#link-demo"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Link
+  size="lg"
+  label="Advanced example"
+  href="#link-demo"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Link"No
hrefstring"#"No
targetstring""No
relstring""No
externalbooleanfalseNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/list-group.wrn b/app/pages/components/list-group.wrn new file mode 100644 index 0000000..82700b8 --- /dev/null +++ b/app/pages/components/list-group.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ListGroupDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "List Group example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default list group for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"list-group-0-1\",\n \"key\": \"list-group-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#list-group-demo\",\n \"actionHref\": \"#list-group-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"list-group-0-2\",\n \"key\": \"list-group-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#list-group-demo\",\n \"actionHref\": \"#list-group-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "List Group" + description = "Theme-aware, responsive list group component." + } + view { + +
+
+ Base component +

List Group

+

Theme-aware, responsive list group component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure List Group

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<ListGroup
+  title="List Group example"
+  description="A polished default list group for a modern application."
+  items='[
+    {
+      "id": "list-group-0-1",
+      "key": "list-group-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#list-group-demo",
+      "actionHref": "#list-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "list-group-0-2",
+      "key": "list-group-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#list-group-demo",
+      "actionHref": "#list-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ListGroup
+  title="List Group example"
+  description="A polished default list group for a modern application."
+  items='[
+    {
+      "id": "list-group-0-1",
+      "key": "list-group-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#list-group-demo",
+      "actionHref": "#list-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "list-group-0-2",
+      "key": "list-group-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#list-group-demo",
+      "actionHref": "#list-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ListGroup
+  size="sm"
+  title="Compact List Group"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "list-group-1-1",
+      "key": "list-group-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#list-group-demo",
+      "actionHref": "#list-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "list-group-1-2",
+      "key": "list-group-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#list-group-demo",
+      "actionHref": "#list-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ListGroup
+  size="lg"
+  title="Advanced List Group"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "list-group-2-1",
+      "key": "list-group-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#list-group-demo",
+      "actionHref": "#list-group-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "list-group-2-2",
+      "key": "list-group-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#list-group-demo",
+      "actionHref": "#list-group-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"List Group"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/list.wrn b/app/pages/components/list.wrn new file mode 100644 index 0000000..c484444 --- /dev/null +++ b/app/pages/components/list.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ListDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "List example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default list for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"list-0-1\",\n \"key\": \"list-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#list-demo\",\n \"actionHref\": \"#list-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"list-0-2\",\n \"key\": \"list-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#list-demo\",\n \"actionHref\": \"#list-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "List" + description = "Theme-aware, responsive list component." + } + view { + +
+
+ Base component +

List

+

Theme-aware, responsive list component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure List

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<List
+  title="List example"
+  description="A polished default list for a modern application."
+  items='[
+    {
+      "id": "list-0-1",
+      "key": "list-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#list-demo",
+      "actionHref": "#list-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "list-0-2",
+      "key": "list-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#list-demo",
+      "actionHref": "#list-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<List
+  title="List example"
+  description="A polished default list for a modern application."
+  items='[
+    {
+      "id": "list-0-1",
+      "key": "list-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#list-demo",
+      "actionHref": "#list-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "list-0-2",
+      "key": "list-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#list-demo",
+      "actionHref": "#list-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<List
+  size="sm"
+  title="Compact List"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "list-1-1",
+      "key": "list-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#list-demo",
+      "actionHref": "#list-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "list-1-2",
+      "key": "list-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#list-demo",
+      "actionHref": "#list-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<List
+  size="lg"
+  title="Advanced List"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "list-2-1",
+      "key": "list-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#list-demo",
+      "actionHref": "#list-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "list-2-2",
+      "key": "list-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#list-demo",
+      "actionHref": "#list-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"List"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/map.wrn b/app/pages/components/map.wrn new file mode 100644 index 0000000..d389c5b --- /dev/null +++ b/app/pages/components/map.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page MapDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Map example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default map for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"map-0-1\",\n \"key\": \"map-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#map-demo\",\n \"actionHref\": \"#map-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"map-0-2\",\n \"key\": \"map-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#map-demo\",\n \"actionHref\": \"#map-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Map" + description = "Theme-aware, responsive map component." + } + view { + +
+
+ Integrations component +

Map

+

Theme-aware, responsive map component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Map

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Map
+  title="Map example"
+  description="A polished default map for a modern application."
+  items='[
+    {
+      "id": "map-0-1",
+      "key": "map-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#map-demo",
+      "actionHref": "#map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "map-0-2",
+      "key": "map-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#map-demo",
+      "actionHref": "#map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Map
+  title="Map example"
+  description="A polished default map for a modern application."
+  items='[
+    {
+      "id": "map-0-1",
+      "key": "map-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#map-demo",
+      "actionHref": "#map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "map-0-2",
+      "key": "map-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#map-demo",
+      "actionHref": "#map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Map
+  size="sm"
+  title="Compact Map"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "map-1-1",
+      "key": "map-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#map-demo",
+      "actionHref": "#map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "map-1-2",
+      "key": "map-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#map-demo",
+      "actionHref": "#map-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Map
+  size="lg"
+  title="Advanced Map"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "map-2-1",
+      "key": "map-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#map-demo",
+      "actionHref": "#map-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "map-2-2",
+      "key": "map-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#map-demo",
+      "actionHref": "#map-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Map"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/marquee.wrn b/app/pages/components/marquee.wrn new file mode 100644 index 0000000..0e6a606 --- /dev/null +++ b/app/pages/components/marquee.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page MarqueeDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Marquee example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default marquee for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"marquee-0-1\",\n \"key\": \"marquee-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#marquee-demo\",\n \"actionHref\": \"#marquee-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"marquee-0-2\",\n \"key\": \"marquee-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#marquee-demo\",\n \"actionHref\": \"#marquee-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Marquee" + description = "Theme-aware, responsive marquee component." + } + view { + +
+
+ Base component +

Marquee

+

Theme-aware, responsive marquee component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Marquee

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Marquee
+  title="Marquee example"
+  description="A polished default marquee for a modern application."
+  items='[
+    {
+      "id": "marquee-0-1",
+      "key": "marquee-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#marquee-demo",
+      "actionHref": "#marquee-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "marquee-0-2",
+      "key": "marquee-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#marquee-demo",
+      "actionHref": "#marquee-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Marquee
+  title="Marquee example"
+  description="A polished default marquee for a modern application."
+  items='[
+    {
+      "id": "marquee-0-1",
+      "key": "marquee-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#marquee-demo",
+      "actionHref": "#marquee-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "marquee-0-2",
+      "key": "marquee-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#marquee-demo",
+      "actionHref": "#marquee-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Marquee
+  size="sm"
+  title="Compact Marquee"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "marquee-1-1",
+      "key": "marquee-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#marquee-demo",
+      "actionHref": "#marquee-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "marquee-1-2",
+      "key": "marquee-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#marquee-demo",
+      "actionHref": "#marquee-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Marquee
+  size="lg"
+  title="Advanced Marquee"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "marquee-2-1",
+      "key": "marquee-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#marquee-demo",
+      "actionHref": "#marquee-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "marquee-2-2",
+      "key": "marquee-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#marquee-demo",
+      "actionHref": "#marquee-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Marquee"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/mega-menu.wrn b/app/pages/components/mega-menu.wrn new file mode 100644 index 0000000..17e51f0 --- /dev/null +++ b/app/pages/components/mega-menu.wrn @@ -0,0 +1,656 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page MegaMenuDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Mega Menu" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"mega-menu-0-1\",\n \"key\": \"mega-menu-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#mega-menu-demo\",\n \"actionHref\": \"#mega-menu-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"mega-menu-0-2\",\n \"key\": \"mega-menu-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#mega-menu-demo\",\n \"actionHref\": \"#mega-menu-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_active = ctx.url.searchParams.get("pg_active") ?? "" + state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Mega Menu" + description = "Theme-aware, responsive mega menu component." + } + view { + +
+
+ Navigation component +

Mega Menu

+

Theme-aware, responsive mega menu component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Mega Menu

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<MegaMenu
+  items='[
+    {
+      "id": "mega-menu-0-1",
+      "key": "mega-menu-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#mega-menu-demo",
+      "actionHref": "#mega-menu-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "mega-menu-0-2",
+      "key": "mega-menu-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#mega-menu-demo",
+      "actionHref": "#mega-menu-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<MegaMenu
+  items='[
+    {
+      "id": "mega-menu-0-1",
+      "key": "mega-menu-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#mega-menu-demo",
+      "actionHref": "#mega-menu-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "mega-menu-0-2",
+      "key": "mega-menu-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#mega-menu-demo",
+      "actionHref": "#mega-menu-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<MegaMenu
+  size="sm"
+  label="Compact example"
+  items='[
+    {
+      "id": "mega-menu-1-1",
+      "key": "mega-menu-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#mega-menu-demo",
+      "actionHref": "#mega-menu-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "mega-menu-1-2",
+      "key": "mega-menu-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#mega-menu-demo",
+      "actionHref": "#mega-menu-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<MegaMenu
+  size="lg"
+  label="Advanced example"
+  items='[
+    {
+      "id": "mega-menu-2-1",
+      "key": "mega-menu-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#mega-menu-demo",
+      "actionHref": "#mega-menu-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "mega-menu-2-2",
+      "key": "mega-menu-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#mega-menu-demo",
+      "actionHref": "#mega-menu-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Mega Menu"No
itemsstring[]No
activestring""No
orientationstring"horizontal"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/modal.wrn b/app/pages/components/modal.wrn new file mode 100644 index 0000000..b6a872c --- /dev/null +++ b/app/pages/components/modal.wrn @@ -0,0 +1,132 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ModalDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Modal example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default modal for a modern application." + state playground_open = ctx.url.searchParams.get("pg_open") ?? "true" + state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom" + state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Modal" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Modal" + description = "Theme-aware, responsive modal component." + } + view { + +
+
+ Overlays component +

Modal

+

Theme-aware, responsive modal component.

+
8 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Modal

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Modal
+  title="Modal example"
+  description="A polished default modal for a modern application."
+  open="true"
+  closeLabel="Modal"
+/>
+
+
+
+
+
Component props8 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Modal
+  title="Modal example"
+  description="A polished default modal for a modern application."
+  open="true"
+  closeLabel="Modal"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Modal
+  size="sm"
+  title="Compact Modal"
+  description="A compact configuration for dashboards and dense product surfaces."
+  open="true"
+  closeLabel="Compact example"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Modal
+  size="lg"
+  title="Advanced Modal"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  open="true"
+  closeLabel="Advanced example"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Modal"No
descriptionstring""No
openbooleanfalseNo
placementstring"bottom"No
closeLabelstring"Close"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/nav.wrn b/app/pages/components/nav.wrn new file mode 100644 index 0000000..133326a --- /dev/null +++ b/app/pages/components/nav.wrn @@ -0,0 +1,656 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page NavDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Nav" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"nav-0-1\",\n \"key\": \"nav-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#nav-demo\",\n \"actionHref\": \"#nav-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"nav-0-2\",\n \"key\": \"nav-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#nav-demo\",\n \"actionHref\": \"#nav-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_active = ctx.url.searchParams.get("pg_active") ?? "" + state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Nav" + description = "Theme-aware, responsive nav component." + } + view { + +
+
+ Navigation component +

Nav

+

Theme-aware, responsive nav component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Nav

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Nav
+  items='[
+    {
+      "id": "nav-0-1",
+      "key": "nav-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#nav-demo",
+      "actionHref": "#nav-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "nav-0-2",
+      "key": "nav-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#nav-demo",
+      "actionHref": "#nav-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Nav
+  items='[
+    {
+      "id": "nav-0-1",
+      "key": "nav-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#nav-demo",
+      "actionHref": "#nav-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "nav-0-2",
+      "key": "nav-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#nav-demo",
+      "actionHref": "#nav-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Nav
+  size="sm"
+  label="Compact example"
+  items='[
+    {
+      "id": "nav-1-1",
+      "key": "nav-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#nav-demo",
+      "actionHref": "#nav-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "nav-1-2",
+      "key": "nav-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#nav-demo",
+      "actionHref": "#nav-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Nav
+  size="lg"
+  label="Advanced example"
+  items='[
+    {
+      "id": "nav-2-1",
+      "key": "nav-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#nav-demo",
+      "actionHref": "#nav-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "nav-2-2",
+      "key": "nav-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#nav-demo",
+      "actionHref": "#nav-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Nav"No
itemsstring[]No
activestring""No
orientationstring"horizontal"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/navbar.wrn b/app/pages/components/navbar.wrn new file mode 100644 index 0000000..ea943f8 --- /dev/null +++ b/app/pages/components/navbar.wrn @@ -0,0 +1,656 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page NavbarDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Navbar" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"navbar-0-1\",\n \"key\": \"navbar-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#navbar-demo\",\n \"actionHref\": \"#navbar-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"navbar-0-2\",\n \"key\": \"navbar-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#navbar-demo\",\n \"actionHref\": \"#navbar-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_active = ctx.url.searchParams.get("pg_active") ?? "" + state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Navbar" + description = "Theme-aware, responsive navbar component." + } + view { + +
+
+ Navigation component +

Navbar

+

Theme-aware, responsive navbar component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Navbar

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Navbar
+  items='[
+    {
+      "id": "navbar-0-1",
+      "key": "navbar-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#navbar-demo",
+      "actionHref": "#navbar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "navbar-0-2",
+      "key": "navbar-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#navbar-demo",
+      "actionHref": "#navbar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Navbar
+  items='[
+    {
+      "id": "navbar-0-1",
+      "key": "navbar-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#navbar-demo",
+      "actionHref": "#navbar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "navbar-0-2",
+      "key": "navbar-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#navbar-demo",
+      "actionHref": "#navbar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Navbar
+  size="sm"
+  label="Compact example"
+  items='[
+    {
+      "id": "navbar-1-1",
+      "key": "navbar-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#navbar-demo",
+      "actionHref": "#navbar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "navbar-1-2",
+      "key": "navbar-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#navbar-demo",
+      "actionHref": "#navbar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Navbar
+  size="lg"
+  label="Advanced example"
+  items='[
+    {
+      "id": "navbar-2-1",
+      "key": "navbar-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#navbar-demo",
+      "actionHref": "#navbar-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "navbar-2-2",
+      "key": "navbar-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#navbar-demo",
+      "actionHref": "#navbar-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Navbar"No
itemsstring[]No
activestring""No
orientationstring"horizontal"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/pagination.wrn b/app/pages/components/pagination.wrn new file mode 100644 index 0000000..2ac03ec --- /dev/null +++ b/app/pages/components/pagination.wrn @@ -0,0 +1,656 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page PaginationDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Pagination" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"pagination-0-1\",\n \"key\": \"pagination-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#pagination-demo\",\n \"actionHref\": \"#pagination-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"pagination-0-2\",\n \"key\": \"pagination-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#pagination-demo\",\n \"actionHref\": \"#pagination-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_active = ctx.url.searchParams.get("pg_active") ?? "" + state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Pagination" + description = "Theme-aware, responsive pagination component." + } + view { + +
+
+ Navigation component +

Pagination

+

Theme-aware, responsive pagination component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Pagination

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Pagination
+  items='[
+    {
+      "id": "pagination-0-1",
+      "key": "pagination-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#pagination-demo",
+      "actionHref": "#pagination-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "pagination-0-2",
+      "key": "pagination-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#pagination-demo",
+      "actionHref": "#pagination-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Pagination
+  items='[
+    {
+      "id": "pagination-0-1",
+      "key": "pagination-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#pagination-demo",
+      "actionHref": "#pagination-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "pagination-0-2",
+      "key": "pagination-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#pagination-demo",
+      "actionHref": "#pagination-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Pagination
+  size="sm"
+  label="Compact example"
+  items='[
+    {
+      "id": "pagination-1-1",
+      "key": "pagination-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#pagination-demo",
+      "actionHref": "#pagination-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "pagination-1-2",
+      "key": "pagination-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#pagination-demo",
+      "actionHref": "#pagination-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Pagination
+  size="lg"
+  label="Advanced example"
+  items='[
+    {
+      "id": "pagination-2-1",
+      "key": "pagination-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#pagination-demo",
+      "actionHref": "#pagination-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "pagination-2-2",
+      "key": "pagination-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#pagination-demo",
+      "actionHref": "#pagination-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Pagination"No
itemsstring[]No
activestring""No
orientationstring"horizontal"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/pin-input.wrn b/app/pages/components/pin-input.wrn new file mode 100644 index 0000000..5e81865 --- /dev/null +++ b/app/pages/components/pin-input.wrn @@ -0,0 +1,436 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page PinInputDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Default four-digit PIN" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "pin-input-1" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "" + state playground_length = ctx.url.searchParams.get("pg_length") ?? "4" + state playground_pattern = ctx.url.searchParams.get("pg_pattern") ?? "[0-9]" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "text" + state playground_inputMode = ctx.url.searchParams.get("pg_inputMode") ?? "numeric" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "○" + state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "one-time-code" + state playground_masked = ctx.url.searchParams.get("pg_masked") ?? "false" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_autoFocus = ctx.url.searchParams.get("pg_autoFocus") ?? "false" + state playground_autoSubmit = ctx.url.searchParams.get("pg_autoSubmit") ?? "false" + state playground_allowPaste = ctx.url.searchParams.get("pg_allowPaste") ?? "true" + state playground_clearable = ctx.url.searchParams.get("pg_clearable") ?? "true" + state playground_clearLabel = ctx.url.searchParams.get("pg_clearLabel") ?? "Clear code" + state playground_separator = ctx.url.searchParams.get("pg_separator") ?? "" + state playground_groupSize = ctx.url.searchParams.get("pg_groupSize") ?? "0" + state playground_helpText = ctx.url.searchParams.get("pg_helpText") ?? "" + state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false" + state playground_validationMessage = ctx.url.searchParams.get("pg_validationMessage") ?? "" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "" + seo { + title = "Pin Input" + description = "Secure multi-cell PIN and verification-code input with regex and paste support." + } + view { + +
+
+ Advanced Forms component +

Pin Input

+

Secure multi-cell PIN and verification-code input with regex and paste support.

+
26 props0 slots6 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Pin Input

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<PinInput
+  label="Default four-digit PIN"
+  name="pin-input-1"
+/>
+
+
+
+
+
Component props26 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Entry behavior

Default four-digit PIN

Live default four-digit pin example with keyboard navigation, filtering, and copyable component code.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<PinInput
+  label="Default four-digit PIN"
+  name="pin-input-1"
+/>
+
+
+
+
+
+
Entry behavior

Different lengths

Live different lengths example with keyboard navigation, filtering, and copyable component code.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<PinInput
+  label="3-digit code"
+  name="pinLength3"
+  length="3"
+/>
+
+<PinInput
+  label="5-digit code"
+  name="pinLength5"
+  length="5"
+/>
+
+<PinInput
+  label="7-digit code"
+  name="pinLength7"
+  length="7"
+/>
+
+
+
+
+
+
Entry behavior

Pre-filled verification code

Live pre-filled verification code example with keyboard navigation, filtering, and copyable component code.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<PinInput
+  label="Pre-filled verification code"
+  name="pin-input-3"
+  value="482915"
+  length="6"
+/>
+
+
+
+
+
+
Entry behavior

Masked security PIN

Live masked security pin example with keyboard navigation, filtering, and copyable component code.

+ 04 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<PinInput
+  label="Masked security PIN"
+  name="pin-input-4"
+  masked="true"
+/>
+
+
+
+
+
+
Entry behavior

Alphanumeric regex

Live alphanumeric regex example with keyboard navigation, filtering, and copyable component code.

+ 05 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<PinInput
+  label="Alphanumeric regex"
+  name="pin-input-5"
+  length="6"
+  pattern="[A-Z0-9]"
+  inputMode="text"
+/>
+
+
+
+
+
+
Entry behavior

Grouped code with separator

Live grouped code with separator example with keyboard navigation, filtering, and copyable component code.

+ 06 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<PinInput
+  label="Grouped code with separator"
+  name="pin-input-6"
+  length="6"
+  separator="–"
+  groupSize="3"
+/>
+
+
+
+
+
+
Entry behavior

Paste from clipboard

Live paste from clipboard example with keyboard navigation, filtering, and copyable component code.

+ 07 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<PinInput
+  label="Paste from clipboard"
+  name="pin-input-7"
+  length="6"
+/>
+
+
+
+
+
+
States & design

Disabled PIN input

Live disabled pin input example with keyboard navigation, filtering, and copyable component code.

+ 08 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<PinInput
+  label="Disabled PIN input"
+  name="pin-input-8"
+  length="6"
+  disabled="true"
+/>
+
+
+
+
+
+
States & design

Read-only code

Live read-only code example with keyboard navigation, filtering, and copyable component code.

+ 09 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<PinInput
+  label="Read-only code"
+  name="pin-input-9"
+  value="739204"
+  length="6"
+  readonly="true"
+/>
+
+
+
+
+
+
States & design

Validation state

Live validation state example with keyboard navigation, filtering, and copyable component code.

+ 010 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<PinInput
+  label="Validation state"
+  name="pin-input-10"
+  length="6"
+  required="true"
+/>
+
+
+
+
+
+
States & design

Supporting help text

Live supporting help text example with keyboard navigation, filtering, and copyable component code.

+ 011 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<PinInput
+  label="Supporting help text"
+  name="pin-input-11"
+  length="6"
+  helpText="Enter the code sent to your registered email address."
+/>
+
+
+
+
+
+
States & design

Large PIN cells

Live large pin cells example with keyboard navigation, filtering, and copyable component code.

+ 012 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<PinInput
+  size="lg"
+  label="Large PIN cells"
+  name="pin-input-12"
+  length="6"
+/>
+
+
+
+
+
+
States & design

Custom placeholder

Live custom placeholder example with keyboard navigation, filtering, and copyable component code.

+ 013 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<PinInput
+  label="Custom placeholder"
+  name="pin-input-13"
+  length="6"
+  placeholder="•"
+/>
+
+
+
+
+
+
Automation

Automatic form submission

Live automatic form submission example with keyboard navigation, filtering, and copyable component code.

+ 014 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<PinInput
+  label="Automatic form submission"
+  name="pin-input-14"
+  length="6"
+  autoSubmit="true"
+/>
+
+
+
+
+
+
Automation

Completion events

Live completion events example with keyboard navigation, filtering, and copyable component code.

+ 015 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<PinInput
+  label="Completion events"
+  name="pin-input-15"
+  length="6"
+/>
+
+
+
+
+
+
Automation

JavaScript methods

Live javascript methods example with keyboard navigation, filtering, and copyable component code.

+ 016 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<PinInput
+  label="JavaScript methods"
+  name="pin-input-16"
+  length="6"
+/>
+
+
+
+
Component events

Respond to every interaction

Events are declared with @event, bubble from the component root, and expose their state through event.detail.

@inputFires after any PIN cell input is processed.
@changeFires when the combined PIN value changes.
@completeFires when every PIN cell contains an accepted character.
@pasteFires after clipboard content is filtered and distributed.
@clearFires after the complete PIN value is cleared.
@errorFires when component configuration, such as regex, is invalid.
Event listeners.js
const component = document.querySelector("[data-wrn-pin-input]")
+
+component.addEventListener("complete", (event) => {
+  console.log(event.detail.value)
+  console.log(event.detail.complete)
+})
+
+component.addEventListener("paste", (event) => {
+  console.log(event.detail)
+})
+
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Verification code"No
namestring"pin"No
valuestring""No
lengthnumber4No
patternstring"[0-9]"No
typestring"text"No
inputModestring"numeric"No
placeholderstring"○"No
autocompletestring"one-time-code"No
maskedbooleanfalseNo
disabledbooleanfalseNo
readonlybooleanfalseNo
requiredbooleanfalseNo
autoFocusbooleanfalseNo
autoSubmitbooleanfalseNo
allowPastebooleantrueNo
clearablebooleantrueNo
clearLabelstring"Clear code"No
separatorstring""No
groupSizenumber0No
helpTextstring""No
invalidbooleanfalseNo
validationMessagestring""No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/popover.wrn b/app/pages/components/popover.wrn new file mode 100644 index 0000000..dc04d95 --- /dev/null +++ b/app/pages/components/popover.wrn @@ -0,0 +1,132 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page PopoverDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Popover example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default popover for a modern application." + state playground_open = ctx.url.searchParams.get("pg_open") ?? "true" + state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom" + state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Popover" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Popover" + description = "Theme-aware, responsive popover component." + } + view { + +
+
+ Overlays component +

Popover

+

Theme-aware, responsive popover component.

+
8 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Popover

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Popover
+  title="Popover example"
+  description="A polished default popover for a modern application."
+  open="true"
+  closeLabel="Popover"
+/>
+
+
+
+
+
Component props8 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Popover
+  title="Popover example"
+  description="A polished default popover for a modern application."
+  open="true"
+  closeLabel="Popover"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Popover
+  size="sm"
+  title="Compact Popover"
+  description="A compact configuration for dashboards and dense product surfaces."
+  open="true"
+  closeLabel="Compact example"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Popover
+  size="lg"
+  title="Advanced Popover"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  open="true"
+  closeLabel="Advanced example"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Popover"No
descriptionstring""No
openbooleanfalseNo
placementstring"bottom"No
closeLabelstring"Close"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/progress.wrn b/app/pages/components/progress.wrn new file mode 100644 index 0000000..f88510b --- /dev/null +++ b/app/pages/components/progress.wrn @@ -0,0 +1,121 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ProgressDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Progress" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "36" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "100" + state playground_showValue = ctx.url.searchParams.get("pg_showValue") ?? "true" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Progress" + description = "Theme-aware, responsive progress component." + } + view { + +
+
+ Base component +

Progress

+

Theme-aware, responsive progress component.

+
7 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Progress

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Progress
+  value="36"
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Progress
+  value="36"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Progress
+  size="sm"
+  label="Compact example"
+  value="60"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Progress
+  size="lg"
+  label="Advanced example"
+  value="84"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Progress"No
valuenumber50No
maxnumber100No
showValuebooleantrueNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/radio.wrn b/app/pages/components/radio.wrn new file mode 100644 index 0000000..688e498 --- /dev/null +++ b/app/pages/components/radio.wrn @@ -0,0 +1,122 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page RadioDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Radio" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_checked = ctx.url.searchParams.get("pg_checked") ?? "false" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Radio" + description = "Theme-aware, responsive radio component." + } + view { + +
+
+ Forms component +

Radio

+

Theme-aware, responsive radio component.

+
8 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Radio

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Radio
+  value="sample-1"
+/>
+
+
+
+
+
Component props8 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Radio
+  value="sample-1"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Radio
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Radio
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Radio"No
namestring""No
valuestring"on"No
checkedbooleanfalseNo
disabledbooleanfalseNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/range-slider.wrn b/app/pages/components/range-slider.wrn new file mode 100644 index 0000000..9e95968 --- /dev/null +++ b/app/pages/components/range-slider.wrn @@ -0,0 +1,131 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page RangeSliderDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Range Slider" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "range" + state playground_min = ctx.url.searchParams.get("pg_min") ?? "" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "" + state playground_step = ctx.url.searchParams.get("pg_step") ?? "" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Range Slider" + description = "Theme-aware, responsive range slider component." + } + view { + +
+
+ Forms component +

Range Slider

+

Theme-aware, responsive range slider component.

+
13 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Range Slider

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<RangeSlider
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
Component props13 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<RangeSlider
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<RangeSlider
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<RangeSlider
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Range Slider"No
namestring""No
valuestring""No
placeholderstring""No
typestring"range"No
minstring""No
maxstring""No
stepstring""No
disabledbooleanfalseNo
requiredbooleanfalseNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/rating.wrn b/app/pages/components/rating.wrn new file mode 100644 index 0000000..3df0000 --- /dev/null +++ b/app/pages/components/rating.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page RatingDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Rating example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default rating for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"rating-0-1\",\n \"key\": \"rating-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#rating-demo\",\n \"actionHref\": \"#rating-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"rating-0-2\",\n \"key\": \"rating-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#rating-demo\",\n \"actionHref\": \"#rating-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Rating" + description = "Theme-aware, responsive rating component." + } + view { + +
+
+ Base component +

Rating

+

Theme-aware, responsive rating component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Rating

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Rating
+  title="Rating example"
+  description="A polished default rating for a modern application."
+  items='[
+    {
+      "id": "rating-0-1",
+      "key": "rating-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#rating-demo",
+      "actionHref": "#rating-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "rating-0-2",
+      "key": "rating-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#rating-demo",
+      "actionHref": "#rating-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Rating
+  title="Rating example"
+  description="A polished default rating for a modern application."
+  items='[
+    {
+      "id": "rating-0-1",
+      "key": "rating-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#rating-demo",
+      "actionHref": "#rating-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "rating-0-2",
+      "key": "rating-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#rating-demo",
+      "actionHref": "#rating-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Rating
+  size="sm"
+  title="Compact Rating"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "rating-1-1",
+      "key": "rating-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#rating-demo",
+      "actionHref": "#rating-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "rating-1-2",
+      "key": "rating-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#rating-demo",
+      "actionHref": "#rating-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Rating
+  size="lg"
+  title="Advanced Rating"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "rating-2-1",
+      "key": "rating-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#rating-demo",
+      "actionHref": "#rating-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "rating-2-2",
+      "key": "rating-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#rating-demo",
+      "actionHref": "#rating-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Rating"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/scrollspy.wrn b/app/pages/components/scrollspy.wrn new file mode 100644 index 0000000..4694194 --- /dev/null +++ b/app/pages/components/scrollspy.wrn @@ -0,0 +1,656 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ScrollspyDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Scrollspy" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"scrollspy-0-1\",\n \"key\": \"scrollspy-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#scrollspy-demo\",\n \"actionHref\": \"#scrollspy-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"scrollspy-0-2\",\n \"key\": \"scrollspy-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#scrollspy-demo\",\n \"actionHref\": \"#scrollspy-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_active = ctx.url.searchParams.get("pg_active") ?? "" + state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Scrollspy" + description = "Theme-aware, responsive scrollspy component." + } + view { + +
+
+ Navigation component +

Scrollspy

+

Theme-aware, responsive scrollspy component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Scrollspy

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Scrollspy
+  items='[
+    {
+      "id": "scrollspy-0-1",
+      "key": "scrollspy-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#scrollspy-demo",
+      "actionHref": "#scrollspy-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "scrollspy-0-2",
+      "key": "scrollspy-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#scrollspy-demo",
+      "actionHref": "#scrollspy-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Scrollspy
+  items='[
+    {
+      "id": "scrollspy-0-1",
+      "key": "scrollspy-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#scrollspy-demo",
+      "actionHref": "#scrollspy-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "scrollspy-0-2",
+      "key": "scrollspy-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#scrollspy-demo",
+      "actionHref": "#scrollspy-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Scrollspy
+  size="sm"
+  label="Compact example"
+  items='[
+    {
+      "id": "scrollspy-1-1",
+      "key": "scrollspy-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#scrollspy-demo",
+      "actionHref": "#scrollspy-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "scrollspy-1-2",
+      "key": "scrollspy-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#scrollspy-demo",
+      "actionHref": "#scrollspy-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Scrollspy
+  size="lg"
+  label="Advanced example"
+  items='[
+    {
+      "id": "scrollspy-2-1",
+      "key": "scrollspy-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#scrollspy-demo",
+      "actionHref": "#scrollspy-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "scrollspy-2-2",
+      "key": "scrollspy-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#scrollspy-demo",
+      "actionHref": "#scrollspy-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Scrollspy"No
itemsstring[]No
activestring""No
orientationstring"horizontal"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/search-box.wrn b/app/pages/components/search-box.wrn new file mode 100644 index 0000000..791f985 --- /dev/null +++ b/app/pages/components/search-box.wrn @@ -0,0 +1,131 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page SearchBoxDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Search Box" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "search" + state playground_min = ctx.url.searchParams.get("pg_min") ?? "" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "" + state playground_step = ctx.url.searchParams.get("pg_step") ?? "" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Search Box" + description = "Theme-aware, responsive search box component." + } + view { + +
+
+ Advanced Forms component +

Search Box

+

Theme-aware, responsive search box component.

+
13 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Search Box

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<SearchBox
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
Component props13 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<SearchBox
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<SearchBox
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<SearchBox
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Search Box"No
namestring""No
valuestring""No
placeholderstring""No
typestring"search"No
minstring""No
maxstring""No
stepstring""No
disabledbooleanfalseNo
requiredbooleanfalseNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/select.wrn b/app/pages/components/select.wrn new file mode 100644 index 0000000..fc5c60f --- /dev/null +++ b/app/pages/components/select.wrn @@ -0,0 +1,667 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page SelectDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Select" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_options = ctx.url.searchParams.get("pg_options") ?? "[\n {\n \"id\": \"select-0-1\",\n \"key\": \"select-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#select-demo\",\n \"actionHref\": \"#select-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"select-0-2\",\n \"key\": \"select-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#select-demo\",\n \"actionHref\": \"#select-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Select" + description = "Theme-aware, responsive select component." + } + view { + +
+
+ Forms component +

Select

+

Theme-aware, responsive select component.

+
10 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Select

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Select
+  value="sample-1"
+  options='[
+    {
+      "id": "select-0-1",
+      "key": "select-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "select-0-2",
+      "key": "select-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
Component props10 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Select
+  value="sample-1"
+  options='[
+    {
+      "id": "select-0-1",
+      "key": "select-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "select-0-2",
+      "key": "select-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Select
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  options='[
+    {
+      "id": "select-1-1",
+      "key": "select-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "select-1-2",
+      "key": "select-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Select
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  options='[
+    {
+      "id": "select-2-1",
+      "key": "select-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "select-2-2",
+      "key": "select-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  placeholder="Search by name, email, or identifier"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Select"No
namestring""No
valuestring""No
optionsstring[]No
placeholderstring"Select an option"No
multiplebooleanfalseNo
disabledbooleanfalseNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/sidebar.wrn b/app/pages/components/sidebar.wrn new file mode 100644 index 0000000..342ca4d --- /dev/null +++ b/app/pages/components/sidebar.wrn @@ -0,0 +1,656 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page SidebarDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Sidebar" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"sidebar-0-1\",\n \"key\": \"sidebar-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#sidebar-demo\",\n \"actionHref\": \"#sidebar-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"sidebar-0-2\",\n \"key\": \"sidebar-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#sidebar-demo\",\n \"actionHref\": \"#sidebar-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_active = ctx.url.searchParams.get("pg_active") ?? "" + state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Sidebar" + description = "Theme-aware, responsive sidebar component." + } + view { + +
+
+ Navigation component +

Sidebar

+

Theme-aware, responsive sidebar component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Sidebar

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Sidebar
+  items='[
+    {
+      "id": "sidebar-0-1",
+      "key": "sidebar-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#sidebar-demo",
+      "actionHref": "#sidebar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "sidebar-0-2",
+      "key": "sidebar-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#sidebar-demo",
+      "actionHref": "#sidebar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Sidebar
+  items='[
+    {
+      "id": "sidebar-0-1",
+      "key": "sidebar-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#sidebar-demo",
+      "actionHref": "#sidebar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "sidebar-0-2",
+      "key": "sidebar-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#sidebar-demo",
+      "actionHref": "#sidebar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Sidebar
+  size="sm"
+  label="Compact example"
+  items='[
+    {
+      "id": "sidebar-1-1",
+      "key": "sidebar-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#sidebar-demo",
+      "actionHref": "#sidebar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "sidebar-1-2",
+      "key": "sidebar-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#sidebar-demo",
+      "actionHref": "#sidebar-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Sidebar
+  size="lg"
+  label="Advanced example"
+  items='[
+    {
+      "id": "sidebar-2-1",
+      "key": "sidebar-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#sidebar-demo",
+      "actionHref": "#sidebar-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "sidebar-2-2",
+      "key": "sidebar-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#sidebar-demo",
+      "actionHref": "#sidebar-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Sidebar"No
itemsstring[]No
activestring""No
orientationstring"horizontal"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/skeleton.wrn b/app/pages/components/skeleton.wrn new file mode 100644 index 0000000..08b01fc --- /dev/null +++ b/app/pages/components/skeleton.wrn @@ -0,0 +1,117 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page SkeletonDetail { + layout = "showcase" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Skeleton" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "md" + state playground_lines = ctx.url.searchParams.get("pg_lines") ?? "3" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Skeleton" + description = "Theme-aware, responsive skeleton component." + } + view { + +
+
+ Base component +

Skeleton

+

Theme-aware, responsive skeleton component.

+
5 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Skeleton

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Skeleton
+  label="Skeleton"
+/>
+
+
+
+
+
Component props5 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Skeleton
+  label="Skeleton"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Skeleton
+  label="Compact example"
+  size="sm"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Skeleton
+  label="Advanced example"
+  size="lg"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
colorstring"primary"No
labelstring"Loading"No
sizestring"md"No
linesnumber3No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/spinner.wrn b/app/pages/components/spinner.wrn new file mode 100644 index 0000000..54b2a3f --- /dev/null +++ b/app/pages/components/spinner.wrn @@ -0,0 +1,117 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page SpinnerDetail { + layout = "showcase" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Spinner" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "md" + state playground_lines = ctx.url.searchParams.get("pg_lines") ?? "3" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Spinner" + description = "Theme-aware, responsive spinner component." + } + view { + +
+
+ Base component +

Spinner

+

Theme-aware, responsive spinner component.

+
5 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Spinner

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Spinner
+  label="Spinner"
+/>
+
+
+
+
+
Component props5 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Spinner
+  label="Spinner"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Spinner
+  label="Compact example"
+  size="sm"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Spinner
+  label="Advanced example"
+  size="lg"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
colorstring"primary"No
labelstring"Loading"No
sizestring"md"No
linesnumber3No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/stepper.wrn b/app/pages/components/stepper.wrn new file mode 100644 index 0000000..3a372e9 --- /dev/null +++ b/app/pages/components/stepper.wrn @@ -0,0 +1,656 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page StepperDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Stepper" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"stepper-0-1\",\n \"key\": \"stepper-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#stepper-demo\",\n \"actionHref\": \"#stepper-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"stepper-0-2\",\n \"key\": \"stepper-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#stepper-demo\",\n \"actionHref\": \"#stepper-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_active = ctx.url.searchParams.get("pg_active") ?? "" + state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Stepper" + description = "Theme-aware, responsive stepper component." + } + view { + +
+
+ Navigation component +

Stepper

+

Theme-aware, responsive stepper component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Stepper

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Stepper
+  items='[
+    {
+      "id": "stepper-0-1",
+      "key": "stepper-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#stepper-demo",
+      "actionHref": "#stepper-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "stepper-0-2",
+      "key": "stepper-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#stepper-demo",
+      "actionHref": "#stepper-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Stepper
+  items='[
+    {
+      "id": "stepper-0-1",
+      "key": "stepper-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#stepper-demo",
+      "actionHref": "#stepper-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "stepper-0-2",
+      "key": "stepper-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#stepper-demo",
+      "actionHref": "#stepper-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Stepper
+  size="sm"
+  label="Compact example"
+  items='[
+    {
+      "id": "stepper-1-1",
+      "key": "stepper-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#stepper-demo",
+      "actionHref": "#stepper-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "stepper-1-2",
+      "key": "stepper-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#stepper-demo",
+      "actionHref": "#stepper-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Stepper
+  size="lg"
+  label="Advanced example"
+  items='[
+    {
+      "id": "stepper-2-1",
+      "key": "stepper-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#stepper-demo",
+      "actionHref": "#stepper-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "stepper-2-2",
+      "key": "stepper-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#stepper-demo",
+      "actionHref": "#stepper-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Stepper"No
itemsstring[]No
activestring""No
orientationstring"horizontal"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/strong-password.wrn b/app/pages/components/strong-password.wrn new file mode 100644 index 0000000..d42b1b9 --- /dev/null +++ b/app/pages/components/strong-password.wrn @@ -0,0 +1,216 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page StrongPasswordDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Live strength meter" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "strong-password-1" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "Northstar!2026" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Create a strong password" + state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "new-password" + state playground_minLength = ctx.url.searchParams.get("pg_minLength") ?? "8" + state playground_specialCharactersSet = ctx.url.searchParams.get("pg_specialCharactersSet") ?? "!@#$%^&*()_+-=[]{}|;:,.<>?" + state playground_requireLowercase = ctx.url.searchParams.get("pg_requireLowercase") ?? "true" + state playground_requireUppercase = ctx.url.searchParams.get("pg_requireUppercase") ?? "true" + state playground_requireNumber = ctx.url.searchParams.get("pg_requireNumber") ?? "true" + state playground_requireSpecialCharacter = ctx.url.searchParams.get("pg_requireSpecialCharacter") ?? "true" + state playground_showRequirements = ctx.url.searchParams.get("pg_showRequirements") ?? "false" + state playground_presentation = ctx.url.searchParams.get("pg_presentation") ?? "inline" + state playground_hintText = ctx.url.searchParams.get("pg_hintText") ?? "" + state playground_emptyLabel = ctx.url.searchParams.get("pg_emptyLabel") ?? "Enter a password" + state playground_weakLabel = ctx.url.searchParams.get("pg_weakLabel") ?? "Weak" + state playground_fairLabel = ctx.url.searchParams.get("pg_fairLabel") ?? "Fair" + state playground_goodLabel = ctx.url.searchParams.get("pg_goodLabel") ?? "Good" + state playground_strongLabel = ctx.url.searchParams.get("pg_strongLabel") ?? "Strong" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false" + state playground_validationMessage = ctx.url.searchParams.get("pg_validationMessage") ?? "" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "" + seo { + title = "Strong Password" + description = "Theme-aware, responsive strong password component." + } + view { + +
+
+ Advanced Forms component +

Strong Password

+

Theme-aware, responsive strong password component.

+
27 props0 slots3 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Strong Password

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<StrongPassword
+  label="Live strength meter"
+  name="strong-password-1"
+  value="Northstar!2026"
+  showRequirements="false"
+/>
+
+
+
+
+
Component props27 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Strength feedback

Live strength meter

Live live strength meter example with accessible scoring feedback and copyable component code.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<StrongPassword
+  label="Live strength meter"
+  name="strong-password-1"
+  value="Northstar!2026"
+  showRequirements="false"
+/>
+
+
+
+
+
+
Strength feedback

Requirements and hint text

Live requirements and hint text example with accessible scoring feedback and copyable component code.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<StrongPassword
+  label="Requirements and hint text"
+  name="strong-password-2"
+  hintText="Use a unique password you do not use for another account."
+/>
+
+
+
+
+
+
Strength feedback

Requirements in a popover

Live requirements in a popover example with accessible scoring feedback and copyable component code.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<StrongPassword
+  label="Requirements in a popover"
+  name="strong-password-3"
+  presentation="popover"
+/>
+
+
+
+
+
+
Configuration

Custom special characters

Live custom special characters example with accessible scoring feedback and copyable component code.

+ 04 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<StrongPassword
+  label="Custom special characters"
+  name="strong-password-4"
+  specialCharactersSet="@#_-."
+/>
+
+
+
+
+
+
Configuration

Optional requirements

Live optional requirements example with accessible scoring feedback and copyable component code.

+ 05 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<StrongPassword
+  label="Optional requirements"
+  name="strong-password-5"
+  requireSpecialCharacter="false"
+/>
+
+
+
+
+
+
Configuration

Disabled password strength

Live disabled password strength example with accessible scoring feedback and copyable component code.

+ 06 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<StrongPassword
+  label="Disabled password strength"
+  name="strong-password-6"
+  disabled="true"
+/>
+
+
+
+
Component events

Respond to every interaction

Events are declared with @event, bubble from the component root, and expose their state through event.detail.

@inputFires as the password value changes.
@changeFires when the password input commits a change.
@strengthFires with the current score, percentage, and strength level.
Event listeners.js
const component = document.querySelector("[data-wrn-strong-password]")
+
+component.addEventListener("select", (event) => {
+  console.log(event.detail.value)
+  console.log(event.detail.complete)
+})
+
+component.addEventListener("load", (event) => {
+  console.log(event.detail)
+})
+
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Password"No
namestring"password"No
valuestring""No
placeholderstring"Create a strong password"No
autocompletestring"new-password"No
minLengthnumber8No
specialCharactersSetstring"!@#$%^&*()_+-=[]{}|;:,.<>?"No
requireLowercasebooleantrueNo
requireUppercasebooleantrueNo
requireNumberbooleantrueNo
requireSpecialCharacterbooleantrueNo
showRequirementsbooleantrueNo
presentationstring"inline"No
hintTextstring"Use a unique password you do not use elsewhere."No
emptyLabelstring"Enter a password"No
weakLabelstring"Weak"No
fairLabelstring"Fair"No
goodLabelstring"Good"No
strongLabelstring"Strong"No
disabledbooleanfalseNo
readonlybooleanfalseNo
requiredbooleanfalseNo
invalidbooleanfalseNo
validationMessagestring""No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/styled-icon.wrn b/app/pages/components/styled-icon.wrn new file mode 100644 index 0000000..d921cd5 --- /dev/null +++ b/app/pages/components/styled-icon.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page StyledIconDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Styled Icon example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default styled icon for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"styled-icon-0-1\",\n \"key\": \"styled-icon-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#styled-icon-demo\",\n \"actionHref\": \"#styled-icon-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"styled-icon-0-2\",\n \"key\": \"styled-icon-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#styled-icon-demo\",\n \"actionHref\": \"#styled-icon-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Styled Icon" + description = "Theme-aware, responsive styled icon component." + } + view { + +
+
+ Base component +

Styled Icon

+

Theme-aware, responsive styled icon component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Styled Icon

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<StyledIcon
+  title="Styled Icon example"
+  description="A polished default styled icon for a modern application."
+  items='[
+    {
+      "id": "styled-icon-0-1",
+      "key": "styled-icon-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#styled-icon-demo",
+      "actionHref": "#styled-icon-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "styled-icon-0-2",
+      "key": "styled-icon-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#styled-icon-demo",
+      "actionHref": "#styled-icon-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<StyledIcon
+  title="Styled Icon example"
+  description="A polished default styled icon for a modern application."
+  items='[
+    {
+      "id": "styled-icon-0-1",
+      "key": "styled-icon-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#styled-icon-demo",
+      "actionHref": "#styled-icon-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "styled-icon-0-2",
+      "key": "styled-icon-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#styled-icon-demo",
+      "actionHref": "#styled-icon-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<StyledIcon
+  size="sm"
+  title="Compact Styled Icon"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "styled-icon-1-1",
+      "key": "styled-icon-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#styled-icon-demo",
+      "actionHref": "#styled-icon-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "styled-icon-1-2",
+      "key": "styled-icon-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#styled-icon-demo",
+      "actionHref": "#styled-icon-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<StyledIcon
+  size="lg"
+  title="Advanced Styled Icon"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "styled-icon-2-1",
+      "key": "styled-icon-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#styled-icon-demo",
+      "actionHref": "#styled-icon-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "styled-icon-2-2",
+      "key": "styled-icon-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#styled-icon-demo",
+      "actionHref": "#styled-icon-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Styled Icon"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/switch.wrn b/app/pages/components/switch.wrn new file mode 100644 index 0000000..9d2b1df --- /dev/null +++ b/app/pages/components/switch.wrn @@ -0,0 +1,122 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page SwitchDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Switch" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_checked = ctx.url.searchParams.get("pg_checked") ?? "false" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Switch" + description = "Theme-aware, responsive switch component." + } + view { + +
+
+ Forms component +

Switch

+

Theme-aware, responsive switch component.

+
8 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Switch

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Switch
+  value="sample-1"
+/>
+
+
+
+
+
Component props8 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Switch
+  value="sample-1"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Switch
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Switch
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Switch"No
namestring""No
valuestring"on"No
checkedbooleanfalseNo
disabledbooleanfalseNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/table.wrn b/app/pages/components/table.wrn new file mode 100644 index 0000000..1cfe281 --- /dev/null +++ b/app/pages/components/table.wrn @@ -0,0 +1,1197 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page TableDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_caption = ctx.url.searchParams.get("pg_caption") ?? "Table" + state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "[\n {\n \"id\": \"table-0-1\",\n \"key\": \"table-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#table-demo\",\n \"actionHref\": \"#table-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"table-0-2\",\n \"key\": \"table-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#table-demo\",\n \"actionHref\": \"#table-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_rows = ctx.url.searchParams.get("pg_rows") ?? "[\n {\n \"id\": \"table-0-1\",\n \"key\": \"table-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#table-demo\",\n \"actionHref\": \"#table-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"table-0-2\",\n \"key\": \"table-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#table-demo\",\n \"actionHref\": \"#table-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_striped = ctx.url.searchParams.get("pg_striped") ?? "true" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Table" + description = "Theme-aware, responsive table component." + } + view { + +
+
+ Tables component +

Table

+

Theme-aware, responsive table component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Table

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
NameStatusProductionActiveStagingReady
+
+
Component code
+ 
<Table
+  columns='[
+    {
+      "id": "table-0-1",
+      "key": "table-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "table-0-2",
+      "key": "table-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  rows='[
+    {
+      "id": "table-0-1",
+      "key": "table-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "table-0-2",
+      "key": "table-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'>
+  <!-- Add default slot content here -->
+</Table>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
NameStatusProductionActiveStagingReady
+
+
+
Component usage.wrn
+ 
<Table
+  columns='[
+    {
+      "id": "table-0-1",
+      "key": "table-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "table-0-2",
+      "key": "table-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  rows='[
+    {
+      "id": "table-0-1",
+      "key": "table-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "table-0-2",
+      "key": "table-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'>
+  <!-- Add default slot content here -->
+</Table>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
NameStatusProductionActiveStagingReady
+
+
+
Component usage.wrn
+ 
<Table
+  size="sm"
+  columns='[
+    {
+      "id": "table-1-1",
+      "key": "table-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "table-1-2",
+      "key": "table-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  rows='[
+    {
+      "id": "table-1-1",
+      "key": "table-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "table-1-2",
+      "key": "table-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'>
+  <!-- Add default slot content here -->
+</Table>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
NameStatusProductionActiveStagingReady
+
+
+
Component usage.wrn
+ 
<Table
+  size="lg"
+  columns='[
+    {
+      "id": "table-2-1",
+      "key": "table-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "table-2-2",
+      "key": "table-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  rows='[
+    {
+      "id": "table-2-1",
+      "key": "table-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "table-2-2",
+      "key": "table-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#table-demo",
+      "actionHref": "#table-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'>
+  <!-- Add default slot content here -->
+</Table>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
captionstring"Table"No
columnsstring[]No
rowsstring[]No
stripedbooleantrueNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/tabs.wrn b/app/pages/components/tabs.wrn new file mode 100644 index 0000000..4f48a26 --- /dev/null +++ b/app/pages/components/tabs.wrn @@ -0,0 +1,656 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page TabsDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Tabs" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"tabs-0-1\",\n \"key\": \"tabs-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#tabs-demo\",\n \"actionHref\": \"#tabs-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"tabs-0-2\",\n \"key\": \"tabs-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#tabs-demo\",\n \"actionHref\": \"#tabs-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_active = ctx.url.searchParams.get("pg_active") ?? "" + state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Tabs" + description = "Theme-aware, responsive tabs component." + } + view { + +
+
+ Navigation component +

Tabs

+

Theme-aware, responsive tabs component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Tabs

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Tabs
+  items='[
+    {
+      "id": "tabs-0-1",
+      "key": "tabs-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#tabs-demo",
+      "actionHref": "#tabs-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "tabs-0-2",
+      "key": "tabs-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#tabs-demo",
+      "actionHref": "#tabs-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Tabs
+  items='[
+    {
+      "id": "tabs-0-1",
+      "key": "tabs-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#tabs-demo",
+      "actionHref": "#tabs-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "tabs-0-2",
+      "key": "tabs-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#tabs-demo",
+      "actionHref": "#tabs-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Tabs
+  size="sm"
+  label="Compact example"
+  items='[
+    {
+      "id": "tabs-1-1",
+      "key": "tabs-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#tabs-demo",
+      "actionHref": "#tabs-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "tabs-1-2",
+      "key": "tabs-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#tabs-demo",
+      "actionHref": "#tabs-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Tabs
+  size="lg"
+  label="Advanced example"
+  items='[
+    {
+      "id": "tabs-2-1",
+      "key": "tabs-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#tabs-demo",
+      "actionHref": "#tabs-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "tabs-2-2",
+      "key": "tabs-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#tabs-demo",
+      "actionHref": "#tabs-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Tabs"No
itemsstring[]No
activestring""No
orientationstring"horizontal"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/textarea.wrn b/app/pages/components/textarea.wrn new file mode 100644 index 0000000..94d7640 --- /dev/null +++ b/app/pages/components/textarea.wrn @@ -0,0 +1,128 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page TextareaDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Textarea" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_rows = ctx.url.searchParams.get("pg_rows") ?? "5" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Textarea" + description = "Theme-aware, responsive textarea component." + } + view { + +
+
+ Forms component +

Textarea

+

Theme-aware, responsive textarea component.

+
10 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Textarea

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Textarea
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
Component props10 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Textarea
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Textarea
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Textarea
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Textarea"No
namestring""No
valuestring""No
placeholderstring""No
rowsnumber5No
disabledbooleanfalseNo
requiredbooleanfalseNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/time-picker.wrn b/app/pages/components/time-picker.wrn new file mode 100644 index 0000000..d7dd895 --- /dev/null +++ b/app/pages/components/time-picker.wrn @@ -0,0 +1,131 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page TimePickerDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Time Picker" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "time" + state playground_min = ctx.url.searchParams.get("pg_min") ?? "" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "" + state playground_step = ctx.url.searchParams.get("pg_step") ?? "" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Time Picker" + description = "Theme-aware, responsive time picker component." + } + view { + +
+
+ Forms component +

Time Picker

+

Theme-aware, responsive time picker component.

+
13 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Time Picker

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<TimePicker
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
Component props13 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<TimePicker
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<TimePicker
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<TimePicker
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Time Picker"No
namestring""No
valuestring""No
placeholderstring""No
typestring"time"No
minstring""No
maxstring""No
stepstring""No
disabledbooleanfalseNo
requiredbooleanfalseNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/timeline.wrn b/app/pages/components/timeline.wrn new file mode 100644 index 0000000..6617184 --- /dev/null +++ b/app/pages/components/timeline.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page TimelineDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Timeline example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default timeline for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"timeline-0-1\",\n \"key\": \"timeline-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#timeline-demo\",\n \"actionHref\": \"#timeline-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"timeline-0-2\",\n \"key\": \"timeline-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#timeline-demo\",\n \"actionHref\": \"#timeline-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Timeline" + description = "Theme-aware, responsive timeline component." + } + view { + +
+
+ Base component +

Timeline

+

Theme-aware, responsive timeline component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Timeline

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Timeline
+  title="Timeline example"
+  description="A polished default timeline for a modern application."
+  items='[
+    {
+      "id": "timeline-0-1",
+      "key": "timeline-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#timeline-demo",
+      "actionHref": "#timeline-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "timeline-0-2",
+      "key": "timeline-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#timeline-demo",
+      "actionHref": "#timeline-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Timeline
+  title="Timeline example"
+  description="A polished default timeline for a modern application."
+  items='[
+    {
+      "id": "timeline-0-1",
+      "key": "timeline-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#timeline-demo",
+      "actionHref": "#timeline-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "timeline-0-2",
+      "key": "timeline-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#timeline-demo",
+      "actionHref": "#timeline-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Timeline
+  size="sm"
+  title="Compact Timeline"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "timeline-1-1",
+      "key": "timeline-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#timeline-demo",
+      "actionHref": "#timeline-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "timeline-1-2",
+      "key": "timeline-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#timeline-demo",
+      "actionHref": "#timeline-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Timeline
+  size="lg"
+  title="Advanced Timeline"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "timeline-2-1",
+      "key": "timeline-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#timeline-demo",
+      "actionHref": "#timeline-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "timeline-2-2",
+      "key": "timeline-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#timeline-demo",
+      "actionHref": "#timeline-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Timeline"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/toast-notifications.wrn b/app/pages/components/toast-notifications.wrn new file mode 100644 index 0000000..7eb69dc --- /dev/null +++ b/app/pages/components/toast-notifications.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ToastNotificationsDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Toast Notifications example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default toast notifications for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"toast-notifications-0-1\",\n \"key\": \"toast-notifications-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#toast-notifications-demo\",\n \"actionHref\": \"#toast-notifications-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"toast-notifications-0-2\",\n \"key\": \"toast-notifications-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#toast-notifications-demo\",\n \"actionHref\": \"#toast-notifications-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Toast Notifications" + description = "Theme-aware, responsive toast notifications component." + } + view { + +
+
+ Integrations component +

Toast Notifications

+

Theme-aware, responsive toast notifications component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Toast Notifications

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<ToastNotifications
+  title="Toast Notifications example"
+  description="A polished default toast notifications for a modern application."
+  items='[
+    {
+      "id": "toast-notifications-0-1",
+      "key": "toast-notifications-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#toast-notifications-demo",
+      "actionHref": "#toast-notifications-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "toast-notifications-0-2",
+      "key": "toast-notifications-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#toast-notifications-demo",
+      "actionHref": "#toast-notifications-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ToastNotifications
+  title="Toast Notifications example"
+  description="A polished default toast notifications for a modern application."
+  items='[
+    {
+      "id": "toast-notifications-0-1",
+      "key": "toast-notifications-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#toast-notifications-demo",
+      "actionHref": "#toast-notifications-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "toast-notifications-0-2",
+      "key": "toast-notifications-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#toast-notifications-demo",
+      "actionHref": "#toast-notifications-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ToastNotifications
+  size="sm"
+  title="Compact Toast Notifications"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "toast-notifications-1-1",
+      "key": "toast-notifications-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#toast-notifications-demo",
+      "actionHref": "#toast-notifications-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "toast-notifications-1-2",
+      "key": "toast-notifications-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#toast-notifications-demo",
+      "actionHref": "#toast-notifications-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ToastNotifications
+  size="lg"
+  title="Advanced Toast Notifications"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "toast-notifications-2-1",
+      "key": "toast-notifications-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#toast-notifications-demo",
+      "actionHref": "#toast-notifications-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "toast-notifications-2-2",
+      "key": "toast-notifications-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#toast-notifications-demo",
+      "actionHref": "#toast-notifications-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Toast Notifications"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/toast.wrn b/app/pages/components/toast.wrn new file mode 100644 index 0000000..f2dede9 --- /dev/null +++ b/app/pages/components/toast.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ToastDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Toast example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default toast for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"toast-0-1\",\n \"key\": \"toast-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#toast-demo\",\n \"actionHref\": \"#toast-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"toast-0-2\",\n \"key\": \"toast-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#toast-demo\",\n \"actionHref\": \"#toast-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Toast" + description = "Theme-aware, responsive toast component." + } + view { + +
+
+ Base component +

Toast

+

Theme-aware, responsive toast component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Toast

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Toast
+  title="Toast example"
+  description="A polished default toast for a modern application."
+  items='[
+    {
+      "id": "toast-0-1",
+      "key": "toast-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#toast-demo",
+      "actionHref": "#toast-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "toast-0-2",
+      "key": "toast-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#toast-demo",
+      "actionHref": "#toast-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Toast
+  title="Toast example"
+  description="A polished default toast for a modern application."
+  items='[
+    {
+      "id": "toast-0-1",
+      "key": "toast-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#toast-demo",
+      "actionHref": "#toast-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "toast-0-2",
+      "key": "toast-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#toast-demo",
+      "actionHref": "#toast-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Toast
+  size="sm"
+  title="Compact Toast"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "toast-1-1",
+      "key": "toast-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#toast-demo",
+      "actionHref": "#toast-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "toast-1-2",
+      "key": "toast-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#toast-demo",
+      "actionHref": "#toast-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Toast
+  size="lg"
+  title="Advanced Toast"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "toast-2-1",
+      "key": "toast-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#toast-demo",
+      "actionHref": "#toast-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "toast-2-2",
+      "key": "toast-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#toast-demo",
+      "actionHref": "#toast-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Toast"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/toggle-count.wrn b/app/pages/components/toggle-count.wrn new file mode 100644 index 0000000..23c3a44 --- /dev/null +++ b/app/pages/components/toggle-count.wrn @@ -0,0 +1,131 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ToggleCountDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Toggle Count" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" + state playground_type = ctx.url.searchParams.get("pg_type") ?? "text" + state playground_min = ctx.url.searchParams.get("pg_min") ?? "" + state playground_max = ctx.url.searchParams.get("pg_max") ?? "" + state playground_step = ctx.url.searchParams.get("pg_step") ?? "" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Toggle Count" + description = "Theme-aware, responsive toggle count component." + } + view { + +
+
+ Advanced Forms component +

Toggle Count

+

Theme-aware, responsive toggle count component.

+
13 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Toggle Count

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<ToggleCount
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
Component props13 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ToggleCount
+  value="sample-1"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ToggleCount
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<ToggleCount
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Toggle Count"No
namestring""No
valuestring""No
placeholderstring""No
typestring"text"No
minstring""No
maxstring""No
stepstring""No
disabledbooleanfalseNo
requiredbooleanfalseNo
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/toggle-password.wrn b/app/pages/components/toggle-password.wrn new file mode 100644 index 0000000..6014ec6 --- /dev/null +++ b/app/pages/components/toggle-password.wrn @@ -0,0 +1,325 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page TogglePasswordDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Password" + state playground_name = ctx.url.searchParams.get("pg_name") ?? "toggle-password-1" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "Northstar!2026" + state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter your password" + state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "current-password" + state playground_minlength = ctx.url.searchParams.get("pg_minlength") ?? "" + state playground_maxlength = ctx.url.searchParams.get("pg_maxlength") ?? "128" + state playground_pattern = ctx.url.searchParams.get("pg_pattern") ?? "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" + state playground_fields = ctx.url.searchParams.get("pg_fields") ?? "[]" + state playground_visible = ctx.url.searchParams.get("pg_visible") ?? "false" + state playground_toggleable = ctx.url.searchParams.get("pg_toggleable") ?? "true" + state playground_toggleMode = ctx.url.searchParams.get("pg_toggleMode") ?? "button" + state playground_checkboxLabel = ctx.url.searchParams.get("pg_checkboxLabel") ?? "Show password" + state playground_showLabel = ctx.url.searchParams.get("pg_showLabel") ?? "Show password" + state playground_hideLabel = ctx.url.searchParams.get("pg_hideLabel") ?? "Hide password" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false" + state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" + state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false" + state playground_helpText = ctx.url.searchParams.get("pg_helpText") ?? "" + state playground_validationMessage = ctx.url.searchParams.get("pg_validationMessage") ?? "" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "" + seo { + title = "Toggle Password" + description = "Accessible password field with optional show and hide controls." + } + view { + +
+
+ Advanced Forms component +

Toggle Password

+

Accessible password field with optional show and hide controls.

+
24 props0 slots3 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Toggle Password

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<TogglePassword
+  name="toggle-password-1"
+  value="Northstar!2026"
+  maxlength="128"
+  fields='[]'
+/>
+
+
+
+
+
Component props24 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Visibility

Inline visibility button

Live inline visibility button example with accessible visibility controls and copyable component code.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<TogglePassword
+  name="toggle-password-1"
+  value="Northstar!2026"
+  maxlength="128"
+  fields='[]'
+/>
+
+
+
+
+
+
Visibility

Checkbox-controlled toggle

Live checkbox-controlled toggle example with accessible visibility controls and copyable component code.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<TogglePassword
+  label="Checkbox-controlled toggle"
+  name="toggle-password-2"
+  value="Northstar!2026"
+  maxlength="128"
+  fields='[]'
+  toggleMode="checkbox"
+/>
+
+
+
+
+
+
Visibility

Synchronized password fields

Live synchronized password fields example with accessible visibility controls and copyable component code.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<TogglePassword
+  label="Passwords"
+  name="toggle-password-3"
+  maxlength="128"
+  fields='[
+    {
+      "label": "New password",
+      "name": "new-password",
+      "placeholder": "Enter new password",
+      "autocomplete": "new-password"
+    },
+    {
+      "label": "Current password",
+      "name": "current-password",
+      "value": "Northstar!2026",
+      "autocomplete": "current-password"
+    }
+  ]'
+/>
+
+
+
+
+
+
Visibility

Without visibility toggle

Live without visibility toggle example with accessible visibility controls and copyable component code.

+ 04 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<TogglePassword
+  label="Without visibility toggle"
+  name="toggle-password-4"
+  maxlength="128"
+  fields='[]'
+  toggleable="false"
+/>
+
+
+
+
+
+
Forms & states

Supporting help text

Live supporting help text example with accessible visibility controls and copyable component code.

+ 05 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<TogglePassword
+  label="Supporting help text"
+  name="toggle-password-5"
+  maxlength="128"
+  fields='[]'
+  helpText="Use at least eight characters and avoid passwords used on other sites."
+/>
+
+
+
+
+
+
Forms & states

Required validation

Live required validation example with accessible visibility controls and copyable component code.

+ 06 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<TogglePassword
+  label="Required validation"
+  name="toggle-password-6"
+  minlength="8"
+  maxlength="128"
+  fields='[]'
+  required="true"
+/>
+
+
+
+
+
+
Forms & states

Disabled password

Live disabled password example with accessible visibility controls and copyable component code.

+ 07 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<TogglePassword
+  label="Disabled password"
+  name="toggle-password-7"
+  maxlength="128"
+  fields='[]'
+  disabled="true"
+/>
+
+
+
+
+
+
Forms & states

Read-only password

Live read-only password example with accessible visibility controls and copyable component code.

+ 08 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<TogglePassword
+  label="Read-only password"
+  name="toggle-password-8"
+  value="Northstar!2026"
+  maxlength="128"
+  fields='[]'
+  readonly="true"
+/>
+
+
+
+
+
+
Design & events

Large password field

Live large password field example with accessible visibility controls and copyable component code.

+ 09 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<TogglePassword
+  size="lg"
+  label="Large password field"
+  name="toggle-password-9"
+  maxlength="128"
+  fields='[]'
+/>
+
+
+
+
+
+
Design & events

Toggle events

Live toggle events example with accessible visibility controls and copyable component code.

+ 010 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<TogglePassword
+  label="Toggle events"
+  name="toggle-password-10"
+  maxlength="128"
+  fields='[]'
+/>
+
+
+
+
Component events

Respond to every interaction

Events are declared with @event, bubble from the component root, and expose their state through event.detail.

@inputFires whenever the password value receives user input.
@changeFires when the password field commits a changed value.
@toggleFires after password visibility changes.
Event listeners.js
const component = document.querySelector("[data-wrn-toggle-password]")
+
+component.addEventListener("toggle", (event) => {
+  console.log(event.detail.value)
+  console.log(event.detail.complete)
+})
+
+component.addEventListener("input", (event) => {
+  console.log(event.detail)
+})
+
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Password"No
namestring"password"No
valuestring""No
placeholderstring"Enter your password"No
autocompletestring"current-password"No
minlengthstring""No
maxlengthstring""No
patternstring"(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}"No
fieldsstring[]No
visiblebooleanfalseNo
toggleablebooleantrueNo
toggleModestring"button"No
checkboxLabelstring"Show password"No
showLabelstring"Show password"No
hideLabelstring"Hide password"No
disabledbooleanfalseNo
readonlybooleanfalseNo
requiredbooleanfalseNo
invalidbooleanfalseNo
helpTextstring""No
validationMessagestring""No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/tooltip.wrn b/app/pages/components/tooltip.wrn new file mode 100644 index 0000000..24eed15 --- /dev/null +++ b/app/pages/components/tooltip.wrn @@ -0,0 +1,136 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page TooltipDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Tooltip example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default tooltip for a modern application." + state playground_open = ctx.url.searchParams.get("pg_open") ?? "true" + state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom" + state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Tooltip" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Tooltip" + description = "Theme-aware, responsive tooltip component." + } + view { + +
+
+ Overlays component +

Tooltip

+

Theme-aware, responsive tooltip component.

+
8 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Tooltip

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<Tooltip
+  title="Tooltip example"
+  description="A polished default tooltip for a modern application."
+  open="true"
+  closeLabel="Tooltip">
+  <!-- Add default slot content here -->
+</Tooltip>
+
+
+
+
+
Component props8 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Tooltip
+  title="Tooltip example"
+  description="A polished default tooltip for a modern application."
+  open="true"
+  closeLabel="Tooltip">
+  <!-- Add default slot content here -->
+</Tooltip>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Tooltip
+  size="sm"
+  title="Compact Tooltip"
+  description="A compact configuration for dashboards and dense product surfaces."
+  open="true"
+  closeLabel="Compact example">
+  <!-- Add default slot content here -->
+</Tooltip>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Tooltip
+  size="lg"
+  title="Advanced Tooltip"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  open="true"
+  closeLabel="Advanced example">
+  <!-- Add default slot content here -->
+</Tooltip>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Tooltip"No
descriptionstring""No
openbooleanfalseNo
placementstring"bottom"No
closeLabelstring"Close"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/tree-view.wrn b/app/pages/components/tree-view.wrn new file mode 100644 index 0000000..18271a2 --- /dev/null +++ b/app/pages/components/tree-view.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page TreeViewDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Tree View example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default tree view for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"tree-view-0-1\",\n \"key\": \"tree-view-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#tree-view-demo\",\n \"actionHref\": \"#tree-view-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"tree-view-0-2\",\n \"key\": \"tree-view-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#tree-view-demo\",\n \"actionHref\": \"#tree-view-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Tree View" + description = "Theme-aware, responsive tree view component." + } + view { + +
+
+ Base component +

Tree View

+

Theme-aware, responsive tree view component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Tree View

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<TreeView
+  title="Tree View example"
+  description="A polished default tree view for a modern application."
+  items='[
+    {
+      "id": "tree-view-0-1",
+      "key": "tree-view-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#tree-view-demo",
+      "actionHref": "#tree-view-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "tree-view-0-2",
+      "key": "tree-view-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#tree-view-demo",
+      "actionHref": "#tree-view-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<TreeView
+  title="Tree View example"
+  description="A polished default tree view for a modern application."
+  items='[
+    {
+      "id": "tree-view-0-1",
+      "key": "tree-view-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#tree-view-demo",
+      "actionHref": "#tree-view-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "tree-view-0-2",
+      "key": "tree-view-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#tree-view-demo",
+      "actionHref": "#tree-view-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<TreeView
+  size="sm"
+  title="Compact Tree View"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "tree-view-1-1",
+      "key": "tree-view-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#tree-view-demo",
+      "actionHref": "#tree-view-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "tree-view-1-2",
+      "key": "tree-view-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#tree-view-demo",
+      "actionHref": "#tree-view-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<TreeView
+  size="lg"
+  title="Advanced Tree View"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "tree-view-2-1",
+      "key": "tree-view-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#tree-view-demo",
+      "actionHref": "#tree-view-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "tree-view-2-2",
+      "key": "tree-view-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#tree-view-demo",
+      "actionHref": "#tree-view-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Tree View"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/typography.wrn b/app/pages/components/typography.wrn new file mode 100644 index 0000000..c3aa05c --- /dev/null +++ b/app/pages/components/typography.wrn @@ -0,0 +1,118 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page TypographyDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "2" + state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md" + state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Typography" + description = "Theme-aware, responsive typography component." + } + view { + +
+
+ Layout component +

Typography

+

Theme-aware, responsive typography component.

+
6 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Typography

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
Composable content area.
+
+
Component code
+ 
<Typography>
+  <!-- Add default slot content here -->
+</Typography>
+
+
+
+
+
Component props6 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
Composable content area.
+
+
+
Component usage.wrn
+ 
<Typography>
+  <!-- Add default slot content here -->
+</Typography>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
Composable content area.
+
+
+
Component usage.wrn
+ 
<Typography
+  size="sm">
+  <!-- Add default slot content here -->
+</Typography>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
Rich supporting content with additional context.
+
+
+
Component usage.wrn
+ 
<Typography
+  size="lg">
+  <!-- Add default slot content here -->
+</Typography>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
columnsnumber2No
gapstring"md"No
maxWidthstring"xl"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/components/wysiwyg-editor.wrn b/app/pages/components/wysiwyg-editor.wrn new file mode 100644 index 0000000..e7c78b4 --- /dev/null +++ b/app/pages/components/wysiwyg-editor.wrn @@ -0,0 +1,664 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page WysiwygEditorDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Wysiwyg Editor example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default wysiwyg editor for a modern application." + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"wysiwyg-editor-0-1\",\n \"key\": \"wysiwyg-editor-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#wysiwyg-editor-demo\",\n \"actionHref\": \"#wysiwyg-editor-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"wysiwyg-editor-0-2\",\n \"key\": \"wysiwyg-editor-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#wysiwyg-editor-demo\",\n \"actionHref\": \"#wysiwyg-editor-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + seo { + title = "Wysiwyg Editor" + description = "Theme-aware, responsive wysiwyg editor component." + } + view { + +
+
+ Integrations component +

Wysiwyg Editor

+

Theme-aware, responsive wysiwyg editor component.

+
7 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Wysiwyg Editor

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<WysiwygEditor
+  title="Wysiwyg Editor example"
+  description="A polished default wysiwyg editor for a modern application."
+  items='[
+    {
+      "id": "wysiwyg-editor-0-1",
+      "key": "wysiwyg-editor-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#wysiwyg-editor-demo",
+      "actionHref": "#wysiwyg-editor-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "wysiwyg-editor-0-2",
+      "key": "wysiwyg-editor-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#wysiwyg-editor-demo",
+      "actionHref": "#wysiwyg-editor-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
Component props7 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<WysiwygEditor
+  title="Wysiwyg Editor example"
+  description="A polished default wysiwyg editor for a modern application."
+  items='[
+    {
+      "id": "wysiwyg-editor-0-1",
+      "key": "wysiwyg-editor-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#wysiwyg-editor-demo",
+      "actionHref": "#wysiwyg-editor-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "wysiwyg-editor-0-2",
+      "key": "wysiwyg-editor-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#wysiwyg-editor-demo",
+      "actionHref": "#wysiwyg-editor-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<WysiwygEditor
+  size="sm"
+  title="Compact Wysiwyg Editor"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    {
+      "id": "wysiwyg-editor-1-1",
+      "key": "wysiwyg-editor-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#wysiwyg-editor-demo",
+      "actionHref": "#wysiwyg-editor-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "wysiwyg-editor-1-2",
+      "key": "wysiwyg-editor-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#wysiwyg-editor-demo",
+      "actionHref": "#wysiwyg-editor-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<WysiwygEditor
+  size="lg"
+  title="Advanced Wysiwyg Editor"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  items='[
+    {
+      "id": "wysiwyg-editor-2-1",
+      "key": "wysiwyg-editor-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#wysiwyg-editor-demo",
+      "actionHref": "#wysiwyg-editor-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    },
+    {
+      "id": "wysiwyg-editor-2-2",
+      "key": "wysiwyg-editor-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#wysiwyg-editor-demo",
+      "actionHref": "#wysiwyg-editor-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    }
+  ]'
+  variant="success"
+/>
+
+
+
+ +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Wysiwyg Editor"No
descriptionstring""No
itemsstring[]No
variantstring"default"No
classstring""No
+
+ +
+ + } +} diff --git a/app/pages/dark-mode.wrn b/app/pages/dark-mode.wrn new file mode 100644 index 0000000..9856493 --- /dev/null +++ b/app/pages/dark-mode.wrn @@ -0,0 +1,16 @@ +page DarkModeGuide { + layout = "showcase" + seo { + title = "Dark mode" + description = "Choose light, dark, or system mode. The selection persists and updates every preview." + } + view { +
+ +
Customization

Dark mode

Choose light, dark, or system mode. The selection persists and updates every preview.

+

Overview

Choose light, dark, or system mode. The selection persists and updates every preview.

Configuration

Use the design switcher in the header to test this setting live.

Component behavior

The setting is inherited by components, blocks, templates, and playground previews.

+ + +
+ } +} diff --git a/app/pages/docs.wrn b/app/pages/docs.wrn new file mode 100644 index 0000000..c1de736 --- /dev/null +++ b/app/pages/docs.wrn @@ -0,0 +1,10 @@ +page Documentation { + layout = "showcase" + seo { title = "Documentation" description = "Install, configure, and use WRNexus UI." } + view { +
+
Getting started

Build with WRNexus UI

Configure one design system and use it across components, blocks, and complete page templates.

+

Explore the documentation

Every Getting Started and Customization topic now has its own page. Choose a guide from the sidebar to continue.

+
+ } +} diff --git a/app/pages/fonts.wrn b/app/pages/fonts.wrn new file mode 100644 index 0000000..b8ec3d8 --- /dev/null +++ b/app/pages/fonts.wrn @@ -0,0 +1,16 @@ +page FontsGuide { + layout = "showcase" + seo { + title = "Fonts" + description = "Select a font family globally while components continue to inherit typography correctly." + } + view { +
+ +
Customization

Fonts

Select a font family globally while components continue to inherit typography correctly.

+

Overview

Select a font family globally while components continue to inherit typography correctly.

Configuration

Use the design switcher in the header to test this setting live.

Component behavior

The setting is inherited by components, blocks, templates, and playground previews.

+ + +
+ } +} diff --git a/app/pages/forms.wrn b/app/pages/forms.wrn new file mode 100644 index 0000000..762d3e5 --- /dev/null +++ b/app/pages/forms.wrn @@ -0,0 +1,127 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page FormsShowcase { + layout = "showcase" + seo { + title = "Forms components" + description = "11 forms components from @wrnexus/ui." + } + view { +
+ Component category +

Forms

+

11 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

+
11 componentsMultiple use cases33 live configurations
+
+
+
+
+ +
+
+
+
Forms

Checkbox

Theme-aware, responsive checkbox component.

+
8 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Forms

Color Picker

Theme-aware, responsive color picker component.

+
13 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Forms

File Input

Theme-aware, responsive file input component.

+
13 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Forms

Input

Theme-aware, responsive input component.

+
13 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Forms

Input Group

Theme-aware, responsive input group component.

+
13 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Forms

Radio

Theme-aware, responsive radio component.

+
8 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Forms

Range Slider

Theme-aware, responsive range slider component.

+
13 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Forms

Select

Theme-aware, responsive select component.

+
10 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Forms

Switch

Theme-aware, responsive switch component.

+
8 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Forms

Textarea

Theme-aware, responsive textarea component.

+
10 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Forms

Time Picker

Theme-aware, responsive time picker component.

+
13 props · 0 slotsExplore component
+
+
+ } +} diff --git a/app/pages/framework-guides.wrn b/app/pages/framework-guides.wrn new file mode 100644 index 0000000..5f579b5 --- /dev/null +++ b/app/pages/framework-guides.wrn @@ -0,0 +1,16 @@ +page FrameworkGuidesGuide { + layout = "showcase" + seo { + title = "Framework guides" + description = "WRNexus components use native HTML semantics and framework component mounts." + } + view { +
+ +
Getting Started

Framework guides

WRNexus components use native HTML semantics and framework component mounts.

+

Overview

WRNexus components use native HTML semantics and framework component mounts.

Configuration

Use the design switcher in the header to test this setting live.

Component behavior

The setting is inherited by components, blocks, templates, and playground previews.

+ + +
+ } +} diff --git a/app/pages/index.wrn b/app/pages/index.wrn new file mode 100644 index 0000000..f81c20e --- /dev/null +++ b/app/pages/index.wrn @@ -0,0 +1,27 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ComponentShowcase { + layout = "showcase" + seo { + title = "WRNexus component system" + description = "Explore every unique @wrnexus/ui component through live, production-quality examples." + } + view { +
+
+ The UI foundation for WRNexus +

Build modern products
at framework speed.

+

A complete, accessible component system with 85 primitives, ready-made blocks, page templates, responsive behavior, and deeply configurable design tokens.

+
Get started Explore blocks
+
$bun add @wrnexus/ui
+
+
+
+
85Unique components
+
339Live configurations
+
0Duplicate implementations
+
8Focused categories
+
+
Explore the system

Everything your product needs

01
Advanced Forms

9 components · 106 live demos

02
Base

27 components · 86 live demos

03
Forms

11 components · 33 live demos

04
Integrations

12 components · 36 live demos

05
Layout

10 components · 30 live demos

06
Navigation

9 components · 27 live demos

07
Overlays

6 components · 18 live demos

08
Tables

1 components · 3 live demos

+
+ } +} diff --git a/app/pages/installation.wrn b/app/pages/installation.wrn new file mode 100644 index 0000000..552acd1 --- /dev/null +++ b/app/pages/installation.wrn @@ -0,0 +1,16 @@ +page InstallationGuide { + layout = "showcase" + seo { + title = "Installation" + description = "Install the package and import the shared stylesheet once in your application." + } + view { +
+ +
Getting Started

Installation

Install the package and import the shared stylesheet once in your application.

+

Overview

Install the package and import the shared stylesheet once in your application.

Configuration

Use the design switcher in the header to test this setting live.

Component behavior

The setting is inherited by components, blocks, templates, and playground previews.

+

Quick start

bun add @wrnexus/ui
+ +
+ } +} diff --git a/app/pages/integrations.wrn b/app/pages/integrations.wrn new file mode 100644 index 0000000..62222a6 --- /dev/null +++ b/app/pages/integrations.wrn @@ -0,0 +1,137 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page IntegrationsShowcase { + layout = "showcase" + seo { + title = "Integrations components" + description = "12 integrations components from @wrnexus/ui." + } + view { +
+ Component category +

Integrations

+

12 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

+
12 componentsMultiple use cases36 live configurations
+
+
+
+
+ +
+
+
+
Integrations

Advanced Date Picker

Theme-aware, responsive advanced date picker component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Integrations

Advanced Range Slider

Theme-aware, responsive advanced range slider component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Integrations

Chart

Theme-aware, responsive chart component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Integrations

Clipboard

Theme-aware, responsive clipboard component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Integrations

Confetti

Theme-aware, responsive confetti component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Integrations

Data Map

Theme-aware, responsive data map component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Integrations

Data Table

Theme-aware, responsive data table component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Integrations

Drag And Drop

Theme-aware, responsive drag and drop component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Integrations

File Upload

Theme-aware, responsive file upload component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Integrations

Map

Theme-aware, responsive map component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Integrations

Toast Notifications

Theme-aware, responsive toast notifications component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Integrations

Wysiwyg Editor

Theme-aware, responsive wysiwyg editor component.

+
7 props · 1 slotsExplore component
+
+
+ } +} diff --git a/app/pages/layout.wrn b/app/pages/layout.wrn new file mode 100644 index 0000000..ac5fccf --- /dev/null +++ b/app/pages/layout.wrn @@ -0,0 +1,117 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page LayoutShowcase { + layout = "showcase" + seo { + title = "Layout components" + description = "10 layout components from @wrnexus/ui." + } + view { +
+ Component category +

Layout

+

10 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

+
10 componentsMultiple use cases30 live configurations
+
+
+
+
+ +
+
+
+
Layout

Columns

Theme-aware, responsive columns component.

+
6 props · 1 slotsExplore component
+
+
+
+
+ +
Composable content area.
+
+
+
Layout

Container

Theme-aware, responsive container component.

+
6 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Layout

Custom Scrollbar

Theme-aware, responsive custom scrollbar component.

+
6 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Layout

Divider

Theme-aware, responsive divider component.

+
5 props · 0 slotsExplore component
+
+
+
+
+ +
+
+
+
Layout

Grid

Theme-aware, responsive grid component.

+
6 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Layout

Image

Theme-aware, responsive image component.

+
9 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Layout

Kbd

Theme-aware, responsive kbd component.

+
4 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Layout

Layout Splitter

Theme-aware, responsive layout splitter component.

+
6 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Layout

Link

Theme-aware, responsive link component.

+
8 props · 1 slotsExplore component
+
+
+
+
+ +
Composable content area.
+
+
+
Layout

Typography

Theme-aware, responsive typography component.

+
6 props · 1 slotsExplore component
+
+
+ } +} diff --git a/app/pages/navigation.wrn b/app/pages/navigation.wrn new file mode 100644 index 0000000..ec4cc0d --- /dev/null +++ b/app/pages/navigation.wrn @@ -0,0 +1,107 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page NavigationShowcase { + layout = "showcase" + seo { + title = "Navigation components" + description = "9 navigation components from @wrnexus/ui." + } + view { +
+ Component category +

Navigation

+

9 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

+
9 componentsMultiple use cases27 live configurations
+
+
+
+
+ +
+
+
+
Navigation

Breadcrumb

Theme-aware, responsive breadcrumb component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Navigation

Mega Menu

Theme-aware, responsive mega menu component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Navigation

Nav

Theme-aware, responsive nav component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Navigation

Navbar

Theme-aware, responsive navbar component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Navigation

Pagination

Theme-aware, responsive pagination component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Navigation

Scrollspy

Theme-aware, responsive scrollspy component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Navigation

Sidebar

Theme-aware, responsive sidebar component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Navigation

Stepper

Theme-aware, responsive stepper component.

+
7 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Navigation

Tabs

Theme-aware, responsive tabs component.

+
7 props · 1 slotsExplore component
+
+
+ } +} diff --git a/app/pages/overlays.wrn b/app/pages/overlays.wrn new file mode 100644 index 0000000..da31593 --- /dev/null +++ b/app/pages/overlays.wrn @@ -0,0 +1,77 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page OverlaysShowcase { + layout = "showcase" + seo { + title = "Overlays components" + description = "6 overlays components from @wrnexus/ui." + } + view { +
+ Component category +

Overlays

+

6 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

+
6 componentsMultiple use cases18 live configurations
+
+
+
+
+ +
+
+
+
Overlays

Context Menu

Theme-aware, responsive context menu component.

+
8 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Overlays

Drawer

Theme-aware, responsive drawer component.

+
8 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Overlays

Dropdown

Theme-aware, responsive dropdown component.

+
8 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Overlays

Modal

Theme-aware, responsive modal component.

+
8 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Overlays

Popover

Theme-aware, responsive popover component.

+
8 props · 1 slotsExplore component
+
+
+
+
+ +
+
+
+
Overlays

Tooltip

Theme-aware, responsive tooltip component.

+
8 props · 1 slotsExplore component
+
+
+ } +} diff --git a/app/pages/resources.wrn b/app/pages/resources.wrn new file mode 100644 index 0000000..94e522f --- /dev/null +++ b/app/pages/resources.wrn @@ -0,0 +1,16 @@ +page ResourcesGuide { + layout = "showcase" + seo { + title = "Resources" + description = "Use the component API pages, blocks, and templates as production starting points." + } + view { +
+ +
Getting Started

Resources

Use the component API pages, blocks, and templates as production starting points.

+

Overview

Use the component API pages, blocks, and templates as production starting points.

Configuration

Use the design switcher in the header to test this setting live.

Component behavior

The setting is inherited by components, blocks, templates, and playground previews.

+ + +
+ } +} diff --git a/app/pages/sizing.wrn b/app/pages/sizing.wrn new file mode 100644 index 0000000..24eb85d --- /dev/null +++ b/app/pages/sizing.wrn @@ -0,0 +1,16 @@ +page SizingGuide { + layout = "showcase" + seo { + title = "Sizing" + description = "Compact through large scales adjust the complete component system consistently." + } + view { +
+ +
Customization

Sizing

Compact through large scales adjust the complete component system consistently.

+

Component size

Every component accepts xs, sm, default, md, lg, and xl.

Global density

Compact, default, comfortable, and large scale the complete interface.

Responsive sizing

Component sizing cooperates with responsive breakpoints.

+ + +
+ } +} diff --git a/app/pages/tables.wrn b/app/pages/tables.wrn new file mode 100644 index 0000000..0429e8b --- /dev/null +++ b/app/pages/tables.wrn @@ -0,0 +1,27 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page TablesShowcase { + layout = "showcase" + seo { + title = "Tables components" + description = "1 tables components from @wrnexus/ui." + } + view { +
+ Component category +

Tables

+

1 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

+
1 componentsMultiple use cases3 live configurations
+
+
+
+
+ +
NameStatusProductionActiveStagingReady
+
+
+
Tables

Table

Theme-aware, responsive table component.

+
7 props · 1 slotsExplore component
+
+
+ } +} diff --git a/app/pages/templates.wrn b/app/pages/templates.wrn new file mode 100644 index 0000000..a3b5ddb --- /dev/null +++ b/app/pages/templates.wrn @@ -0,0 +1,11 @@ +page Templates { + layout = "showcase" + seo { title = "Page templates" description = "Complete pages assembled from WRNexus UI blocks." } + view { +
+ +
Complete products

Production-ready templates

Responsive page systems assembled from WRNexus blocks and components.

+
31 pages

Admin dashboard

Dashboard & Admin template with consistent navigation, content, forms, and responsive behavior.

Preview →
18 pages

Commerce storefront

Ecommerce template with consistent navigation, content, forms, and responsive behavior.

Preview →
12 pages

SaaS website

Websites template with consistent navigation, content, forms, and responsive behavior.

Preview →
9 pages

Support center

Support template with consistent navigation, content, forms, and responsive behavior.

Preview →
14 pages

Finance workspace

Finance & Payments template with consistent navigation, content, forms, and responsive behavior.

Preview →
+
+ } +} diff --git a/app/pages/themes.wrn b/app/pages/themes.wrn new file mode 100644 index 0000000..d4d1fad --- /dev/null +++ b/app/pages/themes.wrn @@ -0,0 +1,16 @@ +page ThemesGuide { + layout = "showcase" + seo { + title = "Themes" + description = "Theme presets control radius, surface treatment, borders, shadows, and motion." + } + view { +
+ +
Customization

Themes

Theme presets control radius, surface treatment, borders, shadows, and motion.

+

Default

Balanced surfaces, borders, elevation, and radius.

Soft and sharp

Choose friendly rounded surfaces or dense operational styling.

Glass

Use translucent layered surfaces while retaining semantic tokens.

+ + +
+ } +} diff --git a/app/routes.gen.ts b/app/routes.gen.ts new file mode 100644 index 0000000..998681d --- /dev/null +++ b/app/routes.gen.ts @@ -0,0 +1,160 @@ +// AUTO-GENERATED by `wrnexus dev` - do not edit. +// Typed routes support required, optional, and catch-all parameters. + +export interface Routes { + "/": Record; + "/accessibility": Record; + "/advanced-forms": Record; + "/base": Record; + "/blocks": Record; + "/colors": Record; + "/components/accordion": Record; + "/components/advanced-date-picker": Record; + "/components/advanced-range-slider": Record; + "/components/advanced-select": Record; + "/components/alert": Record; + "/components/avatar": Record; + "/components/avatar-group": Record; + "/components/badge": Record; + "/components/blockquote": Record; + "/components/breadcrumb": Record; + "/components/button": Record; + "/components/button-group": Record; + "/components/card": Record; + "/components/carousel": Record; + "/components/chart": Record; + "/components/chat-bubble": Record; + "/components/checkbox": Record; + "/components/clipboard": Record; + "/components/collapse": Record; + "/components/color-picker": Record; + "/components/columns": Record; + "/components/combo-box": Record; + "/components/confetti": Record; + "/components/container": Record; + "/components/context-menu": Record; + "/components/copy-markup": Record; + "/components/custom-scrollbar": Record; + "/components/data-map": Record; + "/components/data-table": Record; + "/components/date-picker": Record; + "/components/device-frame": Record; + "/components/divider": Record; + "/components/drag-and-drop": Record; + "/components/drawer": Record; + "/components/dropdown": Record; + "/components/file-input": Record; + "/components/file-upload": Record; + "/components/file-upload-progress": Record; + "/components/grid": Record; + "/components/image": Record; + "/components/input": Record; + "/components/input-group": Record; + "/components/input-number": Record; + "/components/kbd": Record; + "/components/layout-splitter": Record; + "/components/legend-indicator": Record; + "/components/link": Record; + "/components/list": Record; + "/components/list-group": Record; + "/components/map": Record; + "/components/marquee": Record; + "/components/mega-menu": Record; + "/components/modal": Record; + "/components/nav": Record; + "/components/navbar": Record; + "/components/pagination": Record; + "/components/pin-input": Record; + "/components/popover": Record; + "/components/progress": Record; + "/components/radio": Record; + "/components/range-slider": Record; + "/components/rating": Record; + "/components/scrollspy": Record; + "/components/search-box": Record; + "/components/select": Record; + "/components/sidebar": Record; + "/components/skeleton": Record; + "/components/spinner": Record; + "/components/stepper": Record; + "/components/strong-password": Record; + "/components/styled-icon": Record; + "/components/switch": Record; + "/components/table": Record; + "/components/tabs": Record; + "/components/textarea": Record; + "/components/time-picker": Record; + "/components/timeline": Record; + "/components/toast": Record; + "/components/toast-notifications": Record; + "/components/toggle-count": Record; + "/components/toggle-password": Record; + "/components/tooltip": Record; + "/components/tree-view": Record; + "/components/typography": Record; + "/components/wysiwyg-editor": Record; + "/dark-mode": Record; + "/docs": Record; + "/fonts": Record; + "/forms": Record; + "/framework-guides": Record; + "/installation": Record; + "/integrations": Record; + "/layout": Record; + "/navigation": Record; + "/overlays": Record; + "/resources": Record; + "/sizing": Record; + "/tables": Record; + "/templates": Record; + "/themes": Record; +} + +export type RoutePath = keyof Routes; +type RouteValue = string | readonly string[] | undefined; + +function encodeRouteValue(value: RouteValue, catchAll: boolean): string { + if (value === undefined) return ""; + const values = Array.isArray(value) ? value : catchAll ? String(value).split("/") : [String(value)]; + return values.map((part) => encodeURIComponent(part)).join("/"); +} + +export function href

( + path: P, + ...args: keyof Routes[P] extends never + ? [] + : Record extends Routes[P] + ? [params?: Routes[P]] + : [params: Routes[P]] +): string { + const params = (args[0] ?? {}) as Record; + const output: string[] = []; + for (const segment of String(path).split("/").filter(Boolean)) { + let name: string | undefined; + let optional = false; + let catchAll = false; + if (segment.startsWith("[[") && segment.endsWith("]]")) { + optional = true; + name = segment.slice(2, -2); + } else if (segment.startsWith("[") && segment.endsWith("]")) { + name = segment.slice(1, -1); + if (name.endsWith("?")) { + optional = true; + name = name.slice(0, -1); + } + } + if (!name) { + output.push(segment); + continue; + } + if (name.startsWith("...")) { + catchAll = true; + name = name.slice(3); + } + const value = params[name]; + if (value === undefined && optional) continue; + if (value === undefined) throw new Error(`WRN-ROUTE-MISSING-PARAM: Missing route parameter '${name}'.`); + output.push(encodeRouteValue(value, catchAll)); + } + return "/" + output.filter(Boolean).join("/"); +} diff --git a/app/schemas/advanced-select-dynamic-validation.ts b/app/schemas/advanced-select-dynamic-validation.ts new file mode 100644 index 0000000..685e80c --- /dev/null +++ b/app/schemas/advanced-select-dynamic-validation.ts @@ -0,0 +1,5 @@ +import { v } from "@wrnexus/validation"; + +export default v.object({ + "advanced-select-27": v.string().required("A team selection is required."), +}); diff --git a/app/schemas/advanced-select-validation.ts b/app/schemas/advanced-select-validation.ts new file mode 100644 index 0000000..70546e4 --- /dev/null +++ b/app/schemas/advanced-select-validation.ts @@ -0,0 +1,5 @@ +import { v } from "@wrnexus/validation"; + +export default v.object({ + "advanced-select-26": v.string().required("Choose at least one available team."), +}); diff --git a/app/schemas/combobox-validation.ts b/app/schemas/combobox-validation.ts new file mode 100644 index 0000000..ec8cae9 --- /dev/null +++ b/app/schemas/combobox-validation.ts @@ -0,0 +1,5 @@ +import { v } from "@wrnexus/validation"; + +export default v.object({ + "combobox-15": v.string().required("Choose a valid team from the suggestions."), +}); diff --git a/app/schemas/pin-input-validation.ts b/app/schemas/pin-input-validation.ts new file mode 100644 index 0000000..aeefaa3 --- /dev/null +++ b/app/schemas/pin-input-validation.ts @@ -0,0 +1,8 @@ +import { v } from "@wrnexus/validation"; + +export default v.object({ + "pin-input-10": v + .string() + .required("Enter your six-digit verification code.") + .length(6, "The verification code must contain six digits."), +}); diff --git a/app/schemas/toggle-password-validation.ts b/app/schemas/toggle-password-validation.ts new file mode 100644 index 0000000..d626f3a --- /dev/null +++ b/app/schemas/toggle-password-validation.ts @@ -0,0 +1,8 @@ +import { v } from "@wrnexus/validation"; + +export default v.object({ + "toggle-password-6": v + .string() + .required("Enter your password.") + .min(8, "Your password must contain at least eight characters."), +}); diff --git a/app/styles/global.css b/app/styles/global.css new file mode 100644 index 0000000..84eac7e --- /dev/null +++ b/app/styles/global.css @@ -0,0 +1,2467 @@ +@import "tailwindcss"; +@plugin "@iconify/tailwind4"; +@source "../**/*.wrn"; +@source "../../../packages/ui/components/*.wrn"; + +:root { + color-scheme: light dark; +} + +html[data-ui-palette="violet"] { + --wire-color-primary: #7c3aed; + --wire-color-primary-hover: #6d28d9; + --wire-color-primary-contrast: #fff; + --wire-color-secondary: #db2777; + --wire-color-success: #059669; + --wire-color-warning: #d97706; + --wire-color-danger: #dc2626; + --wire-color-info: #2563eb; +} + +html[data-ui-palette="blue"] { + --wire-color-primary: #2563eb; + --wire-color-primary-hover: #1d4ed8; + --wire-color-primary-contrast: #fff; + --wire-color-secondary: #475569; + --wire-color-success: #16a34a; + --wire-color-warning: #d97706; + --wire-color-danger: #dc2626; + --wire-color-info: #0284c7; +} + +html[data-ui-palette="emerald"] { + --wire-color-primary: #059669; + --wire-color-primary-hover: #047857; + --wire-color-primary-contrast: #fff; + --wire-color-secondary: #0f766e; + --wire-color-success: #16a34a; + --wire-color-warning: #d97706; + --wire-color-danger: #dc2626; + --wire-color-info: #0284c7; +} + +html[data-ui-palette="rose"] { + --wire-color-primary: #e11d48; + --wire-color-primary-hover: #be123c; + --wire-color-primary-contrast: #fff; + --wire-color-secondary: #9333ea; + --wire-color-success: #059669; + --wire-color-warning: #d97706; + --wire-color-danger: #dc2626; + --wire-color-info: #2563eb; +} + +html[data-ui-palette="amber"] { + --wire-color-primary: #d97706; + --wire-color-primary-hover: #b45309; + --wire-color-primary-contrast: #fff; + --wire-color-secondary: #92400e; + --wire-color-success: #15803d; + --wire-color-warning: #d97706; + --wire-color-danger: #dc2626; + --wire-color-info: #0284c7; +} + +html[data-ui-palette="cyan"] { + --wire-color-primary: #0891b2; + --wire-color-primary-hover: #0e7490; + --wire-color-primary-contrast: #fff; + --wire-color-secondary: #2563eb; + --wire-color-success: #16a34a; + --wire-color-warning: #d97706; + --wire-color-danger: #dc2626; + --wire-color-info: #0284c7; +} + +html[data-ui-palette="slate"] { + --wire-color-primary: #475569; + --wire-color-primary-hover: #334155; + --wire-color-primary-contrast: #fff; + --wire-color-secondary: #0f172a; + --wire-color-success: #15803d; + --wire-color-warning: #b45309; + --wire-color-danger: #b91c1c; + --wire-color-info: #0369a1; +} + +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + color: var(--wire-color-text); + background: var(--wire-color-bg); + font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; +} + +html[data-ui-font="system"] body { + font-family: ui-sans-serif, system-ui, sans-serif; +} + +html[data-ui-font="serif"] body { + font-family: Georgia, "Times New Roman", serif; +} + +html[data-ui-font="mono"] body { + font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; +} + +html[data-ui-scale="compact"] { + font-size: 14px; +} + +html[data-ui-scale="comfortable"] { + font-size: 17px; +} + +html[data-ui-scale="large"] { + font-size: 19px; +} + +html[data-ui-style="soft"] { + --wire-radius-sm: 0.85rem; + --wire-radius: 1.35rem; + --wire-shadow-1: 0 16px 40px color-mix(in srgb, var(--wire-color-primary) 10%, transparent); +} + +html[data-ui-style="sharp"] { + --wire-radius-sm: 0.15rem; + --wire-radius: 0.25rem; + --wire-shadow-1: none; +} + +html[data-ui-style="glass"] { + --wire-radius-sm: 0.8rem; + --wire-radius: 1.1rem; + --wire-shadow-1: 0 20px 50px color-mix(in srgb, var(--wire-color-primary) 12%, transparent); +} + +html[data-ui-style="glass"] :is(.wire-next, .showcase-card, .catalog-card) { + background: color-mix(in srgb, var(--wire-color-surface) 76%, transparent); + backdrop-filter: blur(18px); +} + +.showcase-shell { + min-height: 100vh; +} + +.showcase-header { + position: sticky; + top: 0; + z-index: 70; + display: flex; + align-items: center; + gap: 1rem; + padding: 0.75rem clamp(1rem, 3vw, 2.5rem); + border-bottom: 1px solid var(--wire-color-border); + background: color-mix(in srgb, var(--wire-color-surface) 92%, transparent); + backdrop-filter: blur(16px); +} + +.showcase-header-start, +.showcase-header-end { + display: flex; + align-items: center; + gap: 0.9rem; +} + +.showcase-brand { + display: inline-flex; + flex: 0 0 auto; + align-items: center; + gap: 0.5rem; + color: var(--wire-color-text); + font-weight: 800; + text-decoration: none; +} + +.showcase-nav { + display: flex; + flex: 1; + gap: 0.25rem; + overflow-x: auto; + scrollbar-width: thin; +} + +.showcase-nav a, +.showcase-theme { + min-height: 2.5rem; + display: inline-flex; + align-items: center; + white-space: nowrap; + padding: 0.5rem 0.75rem; + border: 0; + border-radius: var(--wire-radius-sm); + color: var(--wire-color-muted); + background: transparent; + font: inherit; + font-size: 0.82rem; + font-weight: 700; + text-decoration: none; + cursor: pointer; +} + +.showcase-nav a:hover, +.showcase-theme:hover { + color: var(--wire-color-primary); + background: var(--wire-color-surface-2); +} + +.showcase-main { + width: min(100% - 2rem, 100rem); + margin-inline: auto; + padding-block: clamp(2rem, 5vw, 4rem); +} + +.docs-shell:has(.page-home, .page-marketplace) .docs-directory { + display: none; +} + +.docs-shell:has(.page-home, .page-marketplace) { + display: block; +} + +.docs-shell:has(.page-home, .page-marketplace) .showcase-main { + width: min(100% - 2rem, 90rem); +} + +.design-panel { + position: fixed; + top: 4.75rem; + right: 1rem; + z-index: 120; + display: grid; + width: min(23rem, calc(100vw - 2rem)); + gap: 1rem; + padding: 1.25rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius); + background: var(--wire-color-surface); + box-shadow: 0 2rem 5rem rgb(0 0 0 / 25%); + opacity: 0; + visibility: hidden; + transform: translateY(-0.75rem); + transition: 180ms ease; +} + +html[data-design-panel-open] .design-panel { + opacity: 1; + visibility: visible; + transform: none; +} + +.design-panel header, +.design-panel label { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; +} + +.design-panel header div { + display: grid; + gap: 0.2rem; +} + +.design-panel header span { + color: var(--wire-color-muted); + font-size: 0.72rem; +} + +.design-panel header button, +.design-reset { + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + color: var(--wire-color-text); + background: var(--wire-color-surface-2); + cursor: pointer; +} + +.design-panel header button { + display: grid; + width: 2.25rem; + height: 2.25rem; + place-items: center; +} + +.design-panel label > span { + font-size: 0.82rem; + font-weight: 700; +} + +.design-panel select { + width: 11rem; + padding: 0.55rem 0.7rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + color: var(--wire-color-text); + background: var(--wire-color-bg); + font: inherit; + font-size: 0.8rem; +} + +.design-reset { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + min-height: 2.6rem; + font: inherit; + font-size: 0.8rem; + font-weight: 700; +} + +.docs-directory-guides > strong { + display: block; + padding-inline: 0.5rem; + color: var(--wire-color-muted); + font-size: 0.65rem; + font-weight: 800; + letter-spacing: 0.09em; + text-transform: uppercase; +} + +.docs-directory-guides small { + margin-left: 0.35rem; + padding: 0.1rem 0.35rem; + border: 1px solid var(--wire-color-success); + border-radius: 999px; + color: var(--wire-color-success); + font-size: 0.58rem; +} + +.page-home { + padding-top: clamp(2rem, 7vw, 6rem); +} + +.showcase-hero--home { + max-width: 62rem; + margin-inline: auto; + text-align: center; +} + +.showcase-hero--home .showcase-description { + margin-inline: auto; +} + +.home-actions, +.home-install { + display: flex; + align-items: center; + justify-content: center; + gap: 0.75rem; +} + +.home-install { + width: fit-content; + margin: 0.5rem auto 0; + padding: 0.7rem 0.8rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + background: var(--wire-color-surface); +} + +.home-install span { + color: var(--wire-color-primary); +} + +.home-install button { + display: grid; + border: 0; + color: var(--wire-color-muted); + background: none; + cursor: pointer; +} + +.home-product-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; + margin-block: clamp(3rem, 7vw, 6rem); +} + +.home-product-grid article { + display: grid; + gap: 0.8rem; + padding: 1.5rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius); + background: var(--wire-color-surface); +} + +.home-product-grid article > span, +.home-product-grid a { + color: var(--wire-color-primary); +} + +.home-product-grid p { + margin: 0; + color: var(--wire-color-muted); +} + +.home-product-grid a { + font-size: 0.8rem; + font-weight: 800; + text-decoration: none; +} + +.page-docs { + max-width: 52rem; +} + +.docs-intro { + padding-bottom: 2rem; + border-bottom: 1px solid var(--wire-color-border); +} + +.docs-intro h1, +.page-marketplace h1 { + margin: 0.5rem 0; + font-size: clamp(2rem, 4vw, 3.5rem); + letter-spacing: -0.045em; +} + +.docs-intro p, +.page-marketplace > header p, +.guide-section p { + color: var(--wire-color-muted); +} + +.guide-section { + padding-block: 2.4rem; + border-bottom: 1px solid var(--wire-color-border); +} + +.guide-section h2 { + margin: 0 0 0.65rem; +} + +.guide-section pre { + padding: 1rem; + overflow: auto; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + background: var(--wire-color-surface-2); +} + +.guide-next { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + padding-top: 2.5rem; +} + +.guide-next a { + padding: 1rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + color: var(--wire-color-text); + background: var(--wire-color-surface); + font-size: 0.82rem; + font-weight: 800; + text-decoration: none; +} + +.guide-next a:hover { + border-color: var(--wire-color-primary); + color: var(--wire-color-primary); +} + +.market-tabs { + display: flex; + gap: 2rem; + margin: -1rem 0 4rem; + padding: 1rem 0; + overflow-x: auto; + border-bottom: 1px solid var(--wire-color-border); +} + +.market-tabs a { + flex: 0 0 auto; + color: var(--wire-color-muted); + font-size: 0.78rem; + text-decoration: none; +} + +.market-tabs a:first-child { + color: var(--wire-color-text); + font-weight: 800; +} + +.page-marketplace > header { + max-width: 48rem; + margin-bottom: 2.5rem; +} + +.market-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.4rem; +} + +.market-card { + overflow: hidden; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius); + background: var(--wire-color-surface); +} + +.market-preview { + display: grid; + min-height: 12rem; + place-items: center; + color: var(--wire-color-primary); + background: + radial-gradient( + circle at 50% 100%, + color-mix(in srgb, var(--wire-color-primary) 25%, transparent), + transparent 60% + ), + var(--wire-color-bg); +} + +.market-preview div { + display: grid; + width: 45%; + gap: 0.4rem; +} + +.market-preview i { + height: 0.35rem; + border-radius: 1rem; + background: var(--wire-color-border); +} + +.market-card > div:last-child { + padding: 1.1rem; +} + +.market-card small, +.template-card small { + color: var(--wire-color-primary); + font-weight: 700; +} + +.market-card h2 { + margin: 0.35rem 0; + font-size: 1rem; +} + +.market-card p, +.template-card p { + color: var(--wire-color-muted); + font-size: 0.78rem; +} + +.market-card a, +.template-card a { + color: var(--wire-color-text); + font-size: 0.75rem; + font-weight: 800; + text-decoration: none; +} + +.template-list { + display: grid; + gap: 2rem; +} + +.template-card { + display: grid; + grid-template-columns: minmax(16rem, 0.8fr) minmax(24rem, 1.8fr); + min-height: 20rem; + gap: 2rem; + padding: 2rem; + overflow: hidden; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius); + background: var(--wire-color-surface-2); +} + +.template-card h2 { + margin: 1rem 0 0.5rem; + font-size: 1.5rem; +} + +.template-scenes { + position: relative; + min-height: 16rem; +} + +.template-scenes i { + position: absolute; + width: 55%; + height: 85%; + border: 1px solid var(--wire-color-border); + border-radius: 0.6rem; + background: + linear-gradient(90deg, var(--wire-color-surface) 18%, transparent 18%), + repeating-linear-gradient(0deg, transparent 0 1.4rem, var(--wire-color-border) 1.45rem 1.5rem), + var(--wire-color-bg); + box-shadow: var(--wire-shadow-1); +} + +.template-scenes i:nth-child(1) { + left: 0; + top: 8%; +} + +.template-scenes i:nth-child(2) { + left: 27%; + top: 0; +} + +.template-scenes i:nth-child(3) { + right: 0; + top: 12%; +} + +@media (max-width: 980px) { + .market-grid { + grid-template-columns: repeat(2, 1fr); + } + + .template-card { + grid-template-columns: 1fr; + } +} + +@media (max-width: 700px) { + .home-product-grid, + .market-grid { + grid-template-columns: 1fr; + } + + .showcase-header .docs-search { + display: none; + } + + .market-tabs { + margin-bottom: 2rem; + } + + .guide-next { + grid-template-columns: 1fr; + } +} + +.showcase-hero { + display: grid; + gap: 1rem; + margin-bottom: 2rem; +} + +.showcase-eyebrow { + color: var(--wire-color-primary); + font-size: 0.75rem; + font-weight: 800; + letter-spacing: 0.14em; + text-transform: uppercase; +} + +.showcase-title { + margin: 0; + font-size: clamp(2rem, 5vw, 4.5rem); + line-height: 0.98; + letter-spacing: -0.05em; +} + +.showcase-description { + max-width: 52rem; + margin: 0; + color: var(--wire-color-muted); + font-size: 1.05rem; +} + +.showcase-stats, +.showcase-category-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); + gap: 1rem; +} + +.showcase-stat, +.showcase-category { + padding: 1.25rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius); + color: var(--wire-color-text); + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-1); + text-decoration: none; +} + +.showcase-stat strong { + display: block; + color: var(--wire-color-primary); + font-size: 2rem; +} + +.showcase-category:hover { + border-color: var(--wire-color-primary); + transform: translateY(-2px); +} + +.showcase-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); + align-items: start; + gap: 1.25rem; +} + +.showcase-card { + min-width: 0; + overflow: clip; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius); + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-1); +} + +.showcase-card:target { + outline: 3px solid color-mix(in srgb, var(--wire-color-primary) 40%, transparent); + outline-offset: 3px; +} + +.showcase-card-header { + display: flex; + align-items: start; + justify-content: space-between; + gap: 1rem; + padding: 1rem 1.1rem; + border-bottom: 1px solid var(--wire-color-border); + background: var(--wire-color-surface-2); +} + +.showcase-card-title { + margin: 0; + font-size: 1rem; +} + +.showcase-card-purpose { + margin: 0.3rem 0 0; + color: var(--wire-color-muted); + font-size: 0.78rem; +} + +.showcase-card-count { + flex: 0 0 auto; + color: var(--wire-color-primary); + font-size: 0.72rem; + font-weight: 800; +} + +.showcase-stage { + min-height: 10rem; + overflow: auto; + padding: 1.25rem; + background: + linear-gradient(var(--wire-color-border) 1px, transparent 1px), + linear-gradient(90deg, var(--wire-color-border) 1px, transparent 1px), var(--wire-color-bg); + background-size: 1.5rem 1.5rem; +} + +.showcase-instance { + max-width: 100%; +} + +/* Keep overlay/fixed components inspectable inside their card instead of + covering the complete catalog page. */ +.showcase-stage .fixed, +.showcase-stage [class*="fixed"] { + position: relative !important; + inset: auto !important; + z-index: auto !important; + max-height: 24rem; +} + +.showcase-stage .min-h-screen { + min-height: 14rem !important; +} + +.showcase-slot { + padding: 0.75rem; + border: 1px dashed var(--wire-color-border); + border-radius: var(--wire-radius-sm); + color: var(--wire-color-muted); + background: var(--wire-color-surface-2); + font-size: 0.8rem; +} + +@media (max-width: 720px) { + .showcase-header { + align-items: stretch; + flex-wrap: wrap; + } + + .showcase-brand { + flex: 1; + } + + .showcase-nav { + order: 3; + flex-basis: 100%; + } + + .showcase-main { + width: min(100% - 1rem, 100rem); + } +} + +/* Documentation shell ----------------------------------------------------- */ +.showcase-header { + z-index: 100; + min-height: 4rem; + justify-content: space-between; + padding: 0.65rem 1.25rem; + border-bottom: 1px solid var(--wire-color-border); + background: color-mix(in srgb, var(--wire-color-bg) 94%, transparent); + box-shadow: none; +} + +.showcase-header-start, +.showcase-header-end { + display: flex; + align-items: center; + gap: 1rem; +} + +.showcase-brand { + gap: 0.6rem; + font-size: 0.86rem; + font-weight: 850; + letter-spacing: -0.02em; +} + +.showcase-brand-mark { + display: grid; + width: 1.8rem; + height: 1.8rem; + place-items: center; + border-radius: 0.5rem; + color: var(--wire-color-primary-contrast); + background: var(--wire-color-primary); +} + +.showcase-nav { + gap: 0.15rem; +} + +.showcase-nav a { + padding: 0.48rem 0.6rem; + border-radius: 0.45rem; + color: var(--wire-color-muted); + font-size: 0.76rem; + font-weight: 700; +} + +.showcase-nav a:hover { + color: var(--wire-color-text); + background: var(--wire-color-surface-2); +} + +.docs-search { + display: flex; + width: min(18rem, 25vw); + min-height: 2.25rem; + align-items: center; + gap: 0.55rem; + padding: 0.35rem 0.45rem 0.35rem 0.7rem; + border: 1px solid var(--wire-color-border); + border-radius: 0.65rem; + color: var(--wire-color-muted); + background: var(--wire-color-surface-2); +} + +.docs-search input { + min-width: 0; + flex: 1; + border: 0; + outline: 0; + color: var(--wire-color-text); + background: transparent; + font: inherit; + font-size: 0.72rem; +} + +.docs-search kbd { + padding: 0.18rem 0.35rem; + border: 1px solid var(--wire-color-border); + border-radius: 0.35rem; + color: var(--wire-color-muted); + background: var(--wire-color-surface); + font-size: 0.6rem; +} + +.showcase-github, +.showcase-theme, +.docs-menu-toggle { + display: grid; + width: 2.25rem; + height: 2.25rem; + place-items: center; + padding: 0; + border: 1px solid transparent; + border-radius: 0.6rem; + color: var(--wire-color-muted); + background: transparent; +} + +.showcase-github:hover, +.showcase-theme:hover, +.docs-menu-toggle:hover { + color: var(--wire-color-text); + border-color: var(--wire-color-border); + background: var(--wire-color-surface-2); +} + +.docs-menu-toggle { + display: none; +} + +.docs-shell { + display: grid; + min-height: calc(100vh - 4rem); + grid-template-columns: 17rem minmax(0, 1fr); +} + +.docs-directory { + position: sticky; + top: 4rem; + height: calc(100vh - 4rem); + overflow: auto; + padding: 1.5rem 1rem 3rem; + border-right: 1px solid var(--wire-color-border); + background: var(--wire-color-bg); + scrollbar-width: thin; +} + +.docs-directory-intro { + display: grid; + gap: 0.25rem; + margin-bottom: 1.5rem; + padding-inline: 0.45rem; +} + +.docs-directory-intro strong { + font-size: 0.82rem; +} + +.docs-directory-intro span { + color: var(--wire-color-muted); + font-size: 0.66rem; +} + +.docs-directory nav, +.docs-directory-group, +.docs-directory-group > div { + display: grid; +} + +.docs-directory nav { + gap: 1.4rem; +} + +.docs-directory-group { + gap: 0.4rem; +} + +.docs-directory-group > div { + gap: 0.1rem; +} + +.docs-directory-heading { + padding-inline: 0.5rem; + color: var(--wire-color-muted); + font-size: 0.65rem; + font-weight: 800; + letter-spacing: 0.09em; + text-decoration: none; + text-transform: uppercase; +} + +.docs-directory-group > div > a { + overflow: hidden; + padding: 0.42rem 0.55rem; + border-radius: 0.45rem; + color: var(--wire-color-muted); + font-size: 0.72rem; + font-weight: 600; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; +} + +.docs-directory-group > div > a:hover, +.docs-directory-group > div > a[aria-current="page"] { + color: var(--wire-color-text); + background: var(--wire-color-surface-2); +} + +.docs-directory-group > div > a[aria-current="page"] { + box-shadow: inset 2px 0 var(--wire-color-primary); +} + +.docs-directory-empty { + margin: 1rem 0.5rem; + color: var(--wire-color-muted); + font-size: 0.72rem; +} + +.showcase-main { + width: 100%; + max-width: 100rem; + margin: 0 auto; + padding: clamp(1.5rem, 3vw, 3rem); +} + +.docs-breadcrumbs { + margin-bottom: 1.5rem; +} + +.detail-hero { + grid-template-columns: 1fr; + gap: 1rem; + margin-bottom: 3rem; + padding: 0; + border: 0; + border-radius: 0; + background: transparent; + box-shadow: none; +} + +.detail-hero-copy { + max-width: 52rem; + gap: 0.85rem; +} + +.detail-hero h1 { + font-size: clamp(2.4rem, 5vw, 4rem); + line-height: 1; + letter-spacing: -0.055em; +} + +.detail-hero p { + font-size: 0.95rem; +} + +.detail-hero-icon { + display: none; +} + +.detail-badges span, +.category-meta span { + padding: 0.32rem 0.55rem; + font-size: 0.64rem; +} + +.detail-layout { + grid-template-columns: minmax(0, 1fr) 11rem; + gap: clamp(2rem, 4vw, 4rem); +} + +.detail-toc { + padding-left: 0; + border-left: 0; +} + +.detail-toc strong { + color: var(--wire-color-muted); + font-size: 0.64rem; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.detail-toc a { + padding: 0.3rem 0; + font-size: 0.68rem; +} + +.playground-workbench, +.demo-case, +.docs-table-wrap { + border-radius: 0.85rem; + box-shadow: none; +} + +.playground-section { + margin-bottom: 4rem; +} + +.playground-workbench { + grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr); +} + +.demo-case-header { + padding: 1.15rem 1.25rem; +} + +.detail-section-heading h2 { + letter-spacing: -0.035em; +} + +@media (max-width: 1180px) { + .showcase-nav { + display: none; + } + + .detail-layout { + grid-template-columns: 1fr; + } + + .detail-aside { + display: none; + } +} + +@media (max-width: 900px) { + .docs-menu-toggle { + display: grid; + } + + .docs-shell { + grid-template-columns: 1fr; + } + + .docs-directory { + position: fixed; + z-index: 90; + inset: 4rem auto 0 0; + width: min(20rem, 86vw); + height: auto; + transform: translateX(-105%); + transition: transform 180ms ease; + box-shadow: var(--wire-shadow-2); + } + + [data-docs-menu-open] .docs-directory { + transform: translateX(0); + } + + .docs-search { + width: min(15rem, 36vw); + } +} + +@media (max-width: 640px) { + .showcase-header { + padding-inline: 0.75rem; + } + + .showcase-brand { + font-size: 0; + } + + .showcase-brand-mark { + font-size: initial; + } + + .docs-search { + width: min(12rem, 44vw); + } + + .docs-search kbd, + .showcase-github { + display: none; + } + + .showcase-main { + padding: 1rem; + } + + .playground-workbench { + grid-template-columns: 1fr; + } +} + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + scroll-behavior: auto !important; + transition-duration: 0.01ms !important; + animation-duration: 0.01ms !important; + } +} + +/* --- Modern documentation experience ----------------------------------- */ + +body { + background: + radial-gradient( + circle at 10% -10%, + color-mix(in srgb, var(--wire-color-primary) 16%, transparent), + transparent 32rem + ), + radial-gradient( + circle at 92% 8%, + color-mix(in srgb, var(--wire-color-info) 12%, transparent), + transparent 28rem + ), + var(--wire-color-bg); +} + +.showcase-header { + min-height: 4.5rem; + padding-inline: clamp(1rem, 4vw, 4rem); + border-color: color-mix(in srgb, var(--wire-color-border) 72%, transparent); + box-shadow: 0 1px 0 color-mix(in srgb, var(--wire-color-surface) 80%, transparent); +} + +.showcase-brand { + font-size: 0.94rem; + letter-spacing: -0.02em; +} + +.showcase-main { + width: min(100% - 2rem, 92rem); + padding-block: clamp(2.5rem, 6vw, 6rem); +} + +.showcase-hero { + position: relative; + max-width: 68rem; + gap: 1.25rem; + margin-bottom: clamp(3rem, 7vw, 6rem); +} + +.showcase-hero--home { + max-width: 76rem; + padding-block: clamp(2rem, 6vw, 5rem); +} + +.showcase-eyebrow, +.demo-case-eyebrow, +.catalog-card-category, +.detail-section-heading > span, +.home-section-heading > span { + display: inline-flex; + width: max-content; + align-items: center; + gap: 0.45rem; + color: var(--wire-color-primary); + font-size: 0.72rem; + font-weight: 850; + letter-spacing: 0.15em; + text-transform: uppercase; +} + +.showcase-eyebrow::before { + width: 1.75rem; + height: 2px; + border-radius: 999px; + background: var(--wire-color-primary); + content: ""; +} + +.showcase-title { + max-width: 72rem; + font-size: clamp(3rem, 8vw, 7.5rem); + font-weight: 850; + line-height: 0.9; + letter-spacing: -0.075em; +} + +.showcase-title em { + color: var(--wire-color-primary); + font-family: Georgia, "Times New Roman", serif; + font-weight: 500; +} + +.showcase-hero--category .showcase-title { + font-size: clamp(3.25rem, 7vw, 6.5rem); +} + +.showcase-description { + max-width: 59rem; + font-size: clamp(1rem, 2vw, 1.25rem); + line-height: 1.75; +} + +.home-actions { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + margin-top: 0.75rem; +} + +.home-primary-action, +.home-secondary-action { + display: inline-flex; + min-height: 3.25rem; + align-items: center; + justify-content: center; + gap: 0.65rem; + padding: 0.8rem 1.2rem; + border: 1px solid var(--wire-color-border); + border-radius: 0.85rem; + color: var(--wire-color-text); + background: var(--wire-color-surface); + font-size: 0.9rem; + font-weight: 800; + text-decoration: none; + box-shadow: var(--wire-shadow-1); + transition: + transform 180ms ease, + box-shadow 180ms ease; +} + +.home-primary-action { + border-color: var(--wire-color-primary); + color: var(--wire-color-primary-contrast); + background: var(--wire-color-primary); + box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--wire-color-primary) 24%, transparent); +} + +.home-primary-action:hover, +.home-secondary-action:hover { + transform: translateY(-2px); + text-decoration: none; +} + +.showcase-stats { + grid-template-columns: repeat(4, 1fr); + gap: 0; + overflow: hidden; + margin-bottom: clamp(4rem, 8vw, 7rem); + border: 1px solid var(--wire-color-border); + border-radius: 1.5rem; + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-1); +} + +.showcase-stat { + border: 0; + border-right: 1px solid var(--wire-color-border); + border-radius: 0; + padding: clamp(1.25rem, 3vw, 2rem); + box-shadow: none; +} + +.showcase-stat:last-child { + border-right: 0; +} + +.showcase-stat strong { + font-size: clamp(2rem, 4vw, 3.25rem); + letter-spacing: -0.06em; +} + +.showcase-stat span { + color: var(--wire-color-muted); + font-size: 0.8rem; + font-weight: 700; +} + +.home-categories { + display: grid; + gap: 2rem; +} + +.home-section-heading, +.detail-section-heading { + display: grid; + max-width: 48rem; + gap: 0.6rem; +} + +.home-section-heading h2, +.detail-section-heading h2 { + margin: 0; + font-size: clamp(2rem, 4vw, 3.5rem); + line-height: 1; + letter-spacing: -0.055em; +} + +.detail-section-heading p { + margin: 0; + color: var(--wire-color-muted); +} + +.home-category-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.9rem; +} + +.home-category { + position: relative; + display: grid; + grid-template-columns: auto 1fr auto; + align-items: center; + gap: 1.25rem; + min-height: 8rem; + overflow: hidden; + padding: 1.5rem; + border: 1px solid var(--wire-color-border); + border-radius: 1.25rem; + color: var(--wire-color-text); + background: linear-gradient( + 135deg, + color-mix(in srgb, var(--wire-color-primary) 7%, var(--wire-color-surface)), + var(--wire-color-surface) + ); + text-decoration: none; + box-shadow: var(--wire-shadow-1); + transition: + transform 180ms ease, + border-color 180ms ease, + box-shadow 180ms ease; +} + +.home-category:hover { + border-color: color-mix(in srgb, var(--wire-color-primary) 55%, var(--wire-color-border)); + transform: translateY(-3px); + box-shadow: var(--wire-shadow-2); + text-decoration: none; +} + +.home-category-index { + color: color-mix(in srgb, var(--wire-color-primary) 65%, var(--wire-color-muted)); + font-family: ui-monospace, monospace; + font-size: 0.72rem; +} + +.home-category strong { + display: block; + font-size: 1.2rem; + letter-spacing: -0.025em; +} + +.home-category p { + margin: 0.3rem 0 0; + color: var(--wire-color-muted); + font-size: 0.8rem; +} + +.category-meta, +.detail-badges { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.category-meta span, +.detail-badges span { + padding: 0.42rem 0.7rem; + border: 1px solid var(--wire-color-border); + border-radius: 999px; + color: var(--wire-color-muted); + background: color-mix(in srgb, var(--wire-color-surface) 82%, transparent); + font-size: 0.72rem; + font-weight: 750; +} + +.catalog-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + align-items: start; + gap: 1.25rem; +} + +.catalog-card { + overflow: hidden; + border: 1px solid var(--wire-color-border); + border-radius: 1.4rem; + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-1); + transition: + transform 200ms ease, + border-color 200ms ease, + box-shadow 200ms ease; +} + +.catalog-card:hover { + border-color: color-mix(in srgb, var(--wire-color-primary) 45%, var(--wire-color-border)); + transform: translateY(-4px); + box-shadow: var(--wire-shadow-2); +} + +.catalog-card-preview { + position: relative; + display: grid; + min-height: 18rem; + place-items: center; + overflow: hidden; + padding: 2rem; + border-bottom: 1px solid var(--wire-color-border); + color: var(--wire-color-text); + background: + radial-gradient( + circle at 50% 20%, + color-mix(in srgb, var(--wire-color-primary) 14%, transparent), + transparent 58% + ), + linear-gradient(135deg, var(--wire-color-bg), var(--wire-color-surface-2)); + text-decoration: none; +} + +.catalog-card-preview::before { + position: absolute; + inset: 0; + opacity: 0.38; + background-image: + linear-gradient(var(--wire-color-border) 1px, transparent 1px), + linear-gradient(90deg, var(--wire-color-border) 1px, transparent 1px); + background-size: 2rem 2rem; + mask-image: linear-gradient(to bottom, black, transparent); + content: ""; +} + +.catalog-card-stage { + position: relative; + z-index: 1; + width: min(100%, 32rem); +} + +.catalog-card-preview .fixed, +.catalog-card-preview [class*="fixed"] { + position: relative !important; + inset: auto !important; + z-index: auto !important; + max-height: 16rem; +} + +.catalog-card-body { + display: grid; + min-height: 13rem; + align-content: space-between; + gap: 1.25rem; + padding: 1.35rem; +} + +.catalog-card-body h2 { + margin: 0.45rem 0 0; + font-size: 1.25rem; + letter-spacing: -0.035em; +} + +.catalog-card-body p { + margin: 0.55rem 0 0; + color: var(--wire-color-muted); + font-size: 0.83rem; + line-height: 1.65; +} + +.catalog-card-footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding-top: 1rem; + border-top: 1px solid var(--wire-color-border); + font-size: 0.72rem; +} + +.catalog-card-footer > span { + color: var(--wire-color-muted); +} + +.catalog-card-footer a { + color: var(--wire-color-primary); + font-weight: 800; + text-decoration: none; +} + +.docs-breadcrumbs { + display: flex; + align-items: center; + gap: 0.6rem; + margin-bottom: 2rem; + color: var(--wire-color-muted); + font-size: 0.78rem; +} + +.docs-breadcrumbs a { + color: var(--wire-color-muted); + text-decoration: none; +} + +.docs-breadcrumbs a:hover { + color: var(--wire-color-primary); +} + +.detail-hero { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + gap: 3rem; + margin-bottom: clamp(4rem, 8vw, 7rem); + padding: clamp(2rem, 5vw, 4.5rem); + border: 1px solid var(--wire-color-border); + border-radius: 2rem; + background: + radial-gradient( + circle at 86% 15%, + color-mix(in srgb, var(--wire-color-primary) 18%, transparent), + transparent 22rem + ), + linear-gradient(135deg, var(--wire-color-surface), var(--wire-color-surface-2)); + box-shadow: var(--wire-shadow-2); +} + +.detail-hero-copy { + display: grid; + max-width: 60rem; + gap: 1rem; +} + +.detail-hero h1 { + margin: 0; + font-size: clamp(3rem, 7vw, 6rem); + line-height: 0.92; + letter-spacing: -0.07em; +} + +.detail-hero p { + max-width: 50rem; + margin: 0; + color: var(--wire-color-muted); + font-size: 1.05rem; + line-height: 1.7; +} + +.detail-hero-icon { + display: grid; + width: clamp(6rem, 12vw, 10rem); + aspect-ratio: 1; + place-items: center; + border: 1px solid color-mix(in srgb, var(--wire-color-primary) 30%, var(--wire-color-border)); + border-radius: 2rem; + color: var(--wire-color-primary); + background: color-mix(in srgb, var(--wire-color-primary) 10%, var(--wire-color-surface)); + box-shadow: + inset 0 1px 0 color-mix(in srgb, white 35%, transparent), + 0 2rem 4rem color-mix(in srgb, var(--wire-color-primary) 15%, transparent); + transform: rotate(3deg); +} + +.detail-layout { + display: grid; + grid-template-columns: minmax(0, 1fr) 13rem; + align-items: start; + gap: clamp(2rem, 5vw, 5rem); +} + +.playground-section { + margin-bottom: clamp(4rem, 8vw, 7rem); +} + +.playground-workbench { + display: grid; + min-height: 38rem; + grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr); + overflow: hidden; + border: 1px solid var(--wire-color-border); + border-radius: 1.5rem; + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-2); +} + +.playground-preview { + position: relative; + display: grid; + min-width: 0; + grid-template-rows: auto minmax(24rem, 1fr) auto; + border-right: 1px solid var(--wire-color-border); + background: + radial-gradient( + circle at 50% 18%, + color-mix(in srgb, var(--wire-color-primary) 14%, transparent), + transparent 48% + ), + linear-gradient(145deg, var(--wire-color-bg), var(--wire-color-surface-2)); +} + +.playground-preview-source { + display: grid; + min-height: 24rem; + place-items: center; + overflow: auto; + padding: clamp(1.25rem, 5vw, 4rem); + transition: opacity 150ms ease; +} + +.playground-preview-source > * { + width: min(100%, 62rem); +} + +.playground-preview-source > .wire-action:not(.w-full) { + width: fit-content; +} + +.playground-preview-source .fixed, +.playground-preview-source [class*="fixed"] { + position: relative !important; + inset: auto !important; + z-index: auto !important; + max-height: 30rem; +} + +.playground-preview-source .min-h-screen { + min-height: 22rem !important; +} + +[data-playground][data-updating="true"] .playground-preview-source { + opacity: 0.55; +} + +.playground-status { + position: absolute; + inset-block-start: 0.85rem; + inset-inline-end: 8rem; + min-height: 1rem; + color: var(--wire-color-muted); + font-size: 0.68rem; + font-weight: 700; +} + +.playground-code { + display: grid; + min-width: 0; + grid-template-rows: auto 1fr; + border-top: 1px solid var(--wire-color-border); + background: color-mix(in srgb, var(--wire-color-bg) 84%, black); +} + +.playground-code header { + display: flex; + min-height: 2.75rem; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding-inline: 1rem; + border-bottom: 1px solid var(--wire-color-border); + background: color-mix(in srgb, var(--wire-color-surface) 92%, transparent); +} + +.playground-code header > span, +.playground-code button { + display: inline-flex; + align-items: center; + gap: 0.45rem; + font-size: 0.7rem; + font-weight: 750; +} + +.playground-code header > span { + color: var(--wire-color-muted); +} + +.playground-code button { + padding: 0.42rem 0.6rem; + border: 1px solid var(--wire-color-border); + border-radius: 0.55rem; + color: var(--wire-color-text); + background: var(--wire-color-surface); + font-family: inherit; + cursor: pointer; +} + +.playground-code button:hover { + color: var(--wire-color-primary); + border-color: color-mix(in srgb, var(--wire-color-primary) 50%, var(--wire-color-border)); +} + +.playground-code pre { + max-width: 100%; + max-height: 15rem; + overflow: auto; + margin: 0; + padding: 1rem; + color: var(--wire-color-text); + font-size: 0.72rem; + line-height: 1.65; + white-space: pre; +} + +.playground-controls { + display: grid; + min-width: 0; + max-height: 48rem; + grid-template-rows: auto 1fr; + background: var(--wire-color-surface); +} + +.playground-controls > header { + display: flex; + min-height: 4.5rem; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 0.9rem 1rem; + border-bottom: 1px solid var(--wire-color-border); + background: var(--wire-color-surface-2); +} + +.playground-controls > header div, +.playground-field > span, +.playground-toggle > span { + display: grid; + gap: 0.2rem; +} + +.playground-controls > header span { + color: var(--wire-color-primary); + font-size: 0.68rem; + font-weight: 800; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.playground-controls > header strong { + font-size: 0.84rem; +} + +.playground-controls > header button { + display: inline-flex; + align-items: center; + gap: 0.4rem; + padding: 0.5rem 0.65rem; + border: 1px solid var(--wire-color-border); + border-radius: 0.65rem; + color: var(--wire-color-text); + background: var(--wire-color-surface); + font: inherit; + font-size: 0.72rem; + font-weight: 750; + cursor: pointer; +} + +.playground-fields { + display: grid; + align-content: start; + gap: 1rem; + overflow: auto; + padding: 1rem; +} + +.playground-field, +.playground-toggle { + display: grid; + gap: 0.55rem; +} + +.playground-field strong, +.playground-toggle strong { + font-size: 0.78rem; +} + +.playground-field small, +.playground-toggle small { + color: var(--wire-color-muted); + font-size: 0.65rem; +} + +.playground-field input, +.playground-field textarea, +.playground-field select { + width: 100%; + border: 1px solid var(--wire-color-border); + border-radius: 0.7rem; + outline: 0; + color: var(--wire-color-text); + background: var(--wire-color-bg); + font: inherit; + font-size: 0.76rem; +} + +.playground-field input { + min-height: 2.5rem; + padding: 0.55rem 0.7rem; +} + +.playground-field select { + min-height: 2.5rem; + padding: 0.55rem 2rem 0.55rem 0.7rem; + cursor: pointer; +} + +.playground-field input[type="color"] { + padding: 0.25rem; +} + +.playground-field textarea { + min-height: 7rem; + padding: 0.7rem; + font-family: ui-monospace, monospace; + line-height: 1.5; + resize: vertical; +} + +.playground-field input:focus, +.playground-field textarea:focus, +.playground-field select:focus { + border-color: var(--wire-color-primary); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 15%, transparent); +} + +.playground-field [aria-invalid="true"] { + border-color: var(--wire-color-danger); +} + +.playground-field em { + min-height: 0.8rem; + color: var(--wire-color-danger); + font-size: 0.65rem; + font-style: normal; +} + +.playground-toggle { + position: relative; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + cursor: pointer; +} + +.playground-toggle input { + position: absolute; + z-index: 1; + inset-block: 0; + inset-inline-end: 0; + width: 2.4rem; + height: 100%; + margin: 0; + opacity: 0; + cursor: pointer; +} + +.playground-toggle i { + position: relative; + width: 2.4rem; + height: 1.4rem; + border: 1px solid var(--wire-color-border); + border-radius: 999px; + background: var(--wire-color-surface-2); + transition: background 150ms ease; +} + +.playground-toggle i::after { + position: absolute; + inset-block-start: 0.19rem; + inset-inline-start: 0.2rem; + width: 0.9rem; + height: 0.9rem; + border-radius: 50%; + background: var(--wire-color-muted); + transition: transform 150ms ease; + content: ""; +} + +.playground-toggle input:checked + i { + background: var(--wire-color-primary); +} + +.playground-toggle input:checked + i::after { + background: var(--wire-color-primary-contrast); + transform: translateX(1rem); +} + +.playground-toggle input:focus-visible + i { + outline: 2px solid var(--wire-color-primary); + outline-offset: 2px; +} + +.playground-empty { + margin: 0; + color: var(--wire-color-muted); + font-size: 0.78rem; + line-height: 1.6; +} + +.detail-content, +.detail-section, +.demo-list { + display: grid; + gap: clamp(2rem, 5vw, 4rem); +} + +.detail-section { + scroll-margin-top: 6rem; +} + +.demo-list { + gap: 2rem; +} + +.pin-length-demo { + display: grid; + width: 100%; + align-content: center; + justify-items: center; + gap: 1rem; +} + +.pin-length-demo .wire-next--pin-input { + width: fit-content; +} + +.pin-length-demo .wire-next__pin-heading { + display: none; +} + +.pin-length-demo .wire-next__pin-cells { + justify-content: center; + overflow: visible; +} + +.detail-events-grid { + display: grid; + grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); + overflow: hidden; + border: 1px solid var(--wire-color-border); + border-radius: 1.25rem; + background: var(--wire-color-surface); +} + +.detail-events-list { + display: grid; + align-content: start; + padding: 1rem; +} + +.detail-events-list > div { + display: grid; + gap: 0.3rem; + padding: 0.85rem; + border-bottom: 1px solid var(--wire-color-border); +} + +.detail-events-list > div:last-child { + border-bottom: 0; +} + +.detail-events-list code { + width: fit-content; + color: var(--wire-color-primary); + font-size: 0.78rem; + font-weight: 750; +} + +.detail-events-list span { + color: var(--wire-color-muted); + font-size: 0.76rem; + line-height: 1.55; +} + +@media (max-width: 760px) { + .detail-events-grid { + grid-template-columns: 1fr; + } +} + +.demo-case { + overflow: hidden; + border: 1px solid var(--wire-color-border); + border-radius: 1.5rem; + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-1); +} + +.demo-case-header { + display: flex; + align-items: start; + justify-content: space-between; + gap: 2rem; + padding: 1.5rem; +} + +.demo-case-header h2 { + margin: 0.4rem 0 0; + font-size: 1.4rem; + letter-spacing: -0.035em; +} + +.demo-case-header p { + max-width: 42rem; + margin: 0.45rem 0 0; + color: var(--wire-color-muted); + font-size: 0.84rem; +} + +.demo-case-number { + color: color-mix(in srgb, var(--wire-color-primary) 45%, var(--wire-color-border)); + font-family: ui-monospace, monospace; + font-size: 1.6rem; + font-weight: 800; +} + +.demo-workbench { + display: grid; + grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.92fr); + border-top: 1px solid var(--wire-color-border); +} + +.demo-canvas { + position: relative; + min-height: 24rem; + overflow: auto; + border-right: 1px solid var(--wire-color-border); + background: + radial-gradient( + circle at 50% 20%, + color-mix(in srgb, var(--wire-color-primary) 12%, transparent), + transparent 48% + ), + var(--wire-color-bg); +} + +.demo-canvas--2 { + background: + radial-gradient( + circle at 20% 20%, + color-mix(in srgb, var(--wire-color-info) 12%, transparent), + transparent 42% + ), + var(--wire-color-bg); +} + +.demo-canvas--3 { + background: + radial-gradient( + circle at 80% 20%, + color-mix(in srgb, var(--wire-color-success) 12%, transparent), + transparent 42% + ), + var(--wire-color-bg); +} + +.demo-browser-chrome { + display: flex; + height: 2.75rem; + align-items: center; + gap: 0.4rem; + padding-inline: 1rem; + border-bottom: 1px solid var(--wire-color-border); + background: color-mix(in srgb, var(--wire-color-surface) 92%, transparent); +} + +.demo-browser-chrome > span { + width: 0.62rem; + height: 0.62rem; + border-radius: 999px; + background: var(--wire-color-danger); +} + +.demo-browser-chrome > span:nth-child(2) { + background: var(--wire-color-warning); +} + +.demo-browser-chrome > span:nth-child(3) { + background: var(--wire-color-success); +} + +.demo-browser-chrome small { + margin-left: auto; + color: var(--wire-color-muted); + font-size: 0.66rem; + font-weight: 750; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.demo-render { + display: grid; + min-height: 21rem; + place-items: center; + padding: clamp(1.25rem, 5vw, 4rem); +} + +.demo-render > * { + width: min(100%, 58rem); +} + +.demo-render > .wire-action:not(.w-full) { + width: fit-content; +} + +.demo-validation-form { + display: grid; + width: min(100%, 32rem); + gap: 1rem; +} + +.demo-validation-form > .wire-btn { + width: fit-content; +} + +.demo-render .fixed, +.demo-render [class*="fixed"] { + position: relative !important; + inset: auto !important; + z-index: auto !important; + max-height: 24rem; +} + +.demo-render .min-h-screen { + min-height: 16rem !important; +} + +.showcase-instance--2 { + max-width: 42rem; +} + +.showcase-instance--3 { + max-width: 58rem; +} + +.demo-code { + display: grid; + min-width: 0; + grid-template-rows: auto 1fr; + background: color-mix(in srgb, var(--wire-color-bg) 82%, black); +} + +.demo-code header { + display: flex; + min-height: 2.75rem; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding-inline: 1rem; + border-bottom: 1px solid var(--wire-color-border); + background: color-mix(in srgb, var(--wire-color-surface) 92%, transparent); +} + +.demo-code header > span { + display: inline-flex; + align-items: center; + gap: 0.5rem; + color: var(--wire-color-muted); + font-size: 0.75rem; + font-weight: 750; +} + +.demo-code header small { + color: var(--wire-color-primary); + font-family: ui-monospace, monospace; + font-size: 0.68rem; + font-weight: 800; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.demo-code pre { + max-width: 100%; + max-height: 24rem; + overflow: auto; + margin: 0; + padding: 1.25rem; + color: var(--wire-color-text); + background: transparent; + font-size: 0.72rem; + line-height: 1.7; + white-space: pre; +} + +.detail-aside { + position: sticky; + top: 6.5rem; +} + +.detail-toc { + display: grid; + gap: 0.25rem; + padding-left: 1rem; + border-left: 1px solid var(--wire-color-border); +} + +.detail-toc strong { + margin-bottom: 0.5rem; + font-size: 0.76rem; +} + +.detail-toc a { + padding-block: 0.35rem; + color: var(--wire-color-muted); + font-size: 0.72rem; + text-decoration: none; +} + +.detail-toc a:hover { + color: var(--wire-color-primary); +} + +.docs-table-wrap { + overflow: auto; + border: 1px solid var(--wire-color-border); + border-radius: 1.25rem; + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-1); +} + +.docs-table { + width: 100%; + border-collapse: collapse; + text-align: left; + font-size: 0.78rem; +} + +.docs-table th, +.docs-table td { + padding: 0.85rem 1rem; + border-bottom: 1px solid var(--wire-color-border); +} + +.docs-table th { + color: var(--wire-color-muted); + background: var(--wire-color-surface-2); + font-size: 0.67rem; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.docs-table tr:last-child td { + border-bottom: 0; +} + +.docs-table code { + padding: 0.18rem 0.38rem; + border-radius: 0.35rem; + color: var(--wire-color-primary); + background: color-mix(in srgb, var(--wire-color-primary) 8%, transparent); + font-size: 0.72rem; +} + +.docs-required { + color: var(--wire-color-danger); + font-weight: 800; +} + +.docs-empty { + display: flex; + align-items: center; + gap: 0.7rem; + padding: 1.25rem; + border: 1px dashed var(--wire-color-border); + border-radius: 1rem; + color: var(--wire-color-muted); +} + +.detail-pagination { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + margin-top: clamp(4rem, 8vw, 7rem); + padding-top: 2rem; + border-top: 1px solid var(--wire-color-border); +} + +.detail-pagination a { + display: grid; + gap: 0.35rem; + padding: 1.15rem; + border: 1px solid var(--wire-color-border); + border-radius: 1rem; + color: var(--wire-color-text); + background: var(--wire-color-surface); + text-decoration: none; +} + +.detail-pagination a:last-child { + text-align: right; +} + +.detail-pagination small { + color: var(--wire-color-muted); + font-size: 0.65rem; + text-transform: uppercase; +} + +@media (max-width: 960px) { + .playground-workbench { + grid-template-columns: 1fr; + } + + .playground-preview { + border-right: 0; + border-bottom: 1px solid var(--wire-color-border); + } + + .playground-controls { + max-height: 34rem; + } + + .demo-workbench { + grid-template-columns: 1fr; + } + + .demo-canvas { + border-right: 0; + border-bottom: 1px solid var(--wire-color-border); + } + + .showcase-stats { + grid-template-columns: repeat(2, 1fr); + } + + .showcase-stat:nth-child(2) { + border-right: 0; + } + + .showcase-stat:nth-child(-n + 2) { + border-bottom: 1px solid var(--wire-color-border); + } + + .catalog-grid { + grid-template-columns: 1fr; + } + + .detail-layout { + grid-template-columns: 1fr; + } + + .detail-aside { + display: none; + } +} + +@media (max-width: 720px) { + .showcase-main { + width: min(100% - 1rem, 92rem); + } + + .showcase-title { + font-size: clamp(2.8rem, 15vw, 5rem); + } + + .home-category-grid { + grid-template-columns: 1fr; + } + + .detail-hero { + grid-template-columns: 1fr; + padding: 1.5rem; + border-radius: 1.4rem; + } + + .detail-hero-icon { + display: none; + } + + .detail-hero h1 { + font-size: clamp(2.7rem, 14vw, 4.5rem); + } + + .demo-case-header { + padding: 1.15rem; + } + + .demo-case-number { + display: none; + } + + .demo-render { + min-height: 17rem; + padding: 1rem; + } + + .detail-pagination { + grid-template-columns: 1fr; + } +} diff --git a/bun.lock b/bun.lock new file mode 100644 index 0000000..f8b3d9e --- /dev/null +++ b/bun.lock @@ -0,0 +1,265 @@ +{ + "lockfileVersion": 1, + "configVersion": 1, + "workspaces": { + "": { + "name": "component-showcase", + "dependencies": { + "@wrnexus/core": "^0.3.4", + "@wrnexus/dev-server": "^0.3.4", + "@wrnexus/helpers": "^0.3.4", + "@wrnexus/plugin": "^0.3.4", + "@wrnexus/syntax": "^0.3.4", + "@wrnexus/ui": "^0.3.4", + }, + "devDependencies": { + "@iconify-json/lucide": "^1.2.118", + "@iconify/tailwind4": "^1.2.3", + "@tailwindcss/cli": "^4.0.0", + "tailwindcss": "^4.0.0", + "typescript": "^5.5.0", + }, + }, + }, + "packages": { + "@antfu/install-pkg": ["@antfu/install-pkg@1.1.0", "", { "dependencies": { "package-manager-detector": "^1.3.0", "tinyexec": "^1.0.1" } }, "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ=="], + + "@cyberalien/svg-utils": ["@cyberalien/svg-utils@1.2.19", "", { "dependencies": { "@iconify/types": "^2.0.0" } }, "sha512-paDJoDu+LhuH5Ma1q0BDqBpg6d16Xk22cZZrlg/s/J9oB8KgnnpU/snaEETJu2G1pwYcWQINUz6WUqu0Wm9k6A=="], + + "@iconify-json/lucide": ["@iconify-json/lucide@1.2.119", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-KbrC7fT5wPshV1KLRM0k91poP0OH4eKEVywEOH0FCczKb+qth8Pcq1Hy9kS2tXeF52s23qzLnG8AJsExPSupeA=="], + + "@iconify/tailwind4": ["@iconify/tailwind4@1.2.3", "", { "dependencies": { "@iconify/tools": "^5.0.5", "@iconify/types": "^2.0.0", "@iconify/utils": "^3.1.0" }, "peerDependencies": { "tailwindcss": ">= 4.0.0" } }, "sha512-z8SKiMHRASJKF/IY//87MF88lcB7ulxh8vlhQXXLWsBkNtOh6ese9R41MyGpQeqXdRvQVt+/fX2glQtHFjQ+MA=="], + + "@iconify/tools": ["@iconify/tools@5.0.12", "", { "dependencies": { "@cyberalien/svg-utils": "^1.2.15", "@iconify/types": "^2.0.0", "@iconify/utils": "^3.1.3", "fflate": "^0.8.3", "modern-tar": "^0.7.6", "pathe": "^2.0.3", "svgo": "^4.0.1" } }, "sha512-aFPwSFmFphUPVjNLUkgxgUPSPVgTEEjv0mE7NgvfoQBuE5TtsMrKa4HTY65cM5oXZ2a1xKQcW/RKhiOKEiAarw=="], + + "@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="], + + "@iconify/utils": ["@iconify/utils@3.1.4", "", { "dependencies": { "@antfu/install-pkg": "^1.1.0", "@iconify/types": "^2.0.0", "import-meta-resolve": "^4.2.0" } }, "sha512-b1S7B1k9ohZ+iNTi2ATxbRYG9fTrJmUT0rc46bvVnNxqNRGW7dyo/vRREwyniI5IRN2RSJHDcm+s3BjWrSAjHw=="], + + "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="], + + "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="], + + "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="], + + "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="], + + "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="], + + "@parcel/watcher": ["@parcel/watcher@2.5.1", "", { "dependencies": { "detect-libc": "^1.0.3", "is-glob": "^4.0.3", "micromatch": "^4.0.5", "node-addon-api": "^7.0.0" }, "optionalDependencies": { "@parcel/watcher-android-arm64": "2.5.1", "@parcel/watcher-darwin-arm64": "2.5.1", "@parcel/watcher-darwin-x64": "2.5.1", "@parcel/watcher-freebsd-x64": "2.5.1", "@parcel/watcher-linux-arm-glibc": "2.5.1", "@parcel/watcher-linux-arm-musl": "2.5.1", "@parcel/watcher-linux-arm64-glibc": "2.5.1", "@parcel/watcher-linux-arm64-musl": "2.5.1", "@parcel/watcher-linux-x64-glibc": "2.5.1", "@parcel/watcher-linux-x64-musl": "2.5.1", "@parcel/watcher-win32-arm64": "2.5.1", "@parcel/watcher-win32-ia32": "2.5.1", "@parcel/watcher-win32-x64": "2.5.1" } }, "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg=="], + + "@parcel/watcher-android-arm64": ["@parcel/watcher-android-arm64@2.5.1", "", { "os": "android", "cpu": "arm64" }, "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA=="], + + "@parcel/watcher-darwin-arm64": ["@parcel/watcher-darwin-arm64@2.5.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw=="], + + "@parcel/watcher-darwin-x64": ["@parcel/watcher-darwin-x64@2.5.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg=="], + + "@parcel/watcher-freebsd-x64": ["@parcel/watcher-freebsd-x64@2.5.1", "", { "os": "freebsd", "cpu": "x64" }, "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ=="], + + "@parcel/watcher-linux-arm-glibc": ["@parcel/watcher-linux-arm-glibc@2.5.1", "", { "os": "linux", "cpu": "arm" }, "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA=="], + + "@parcel/watcher-linux-arm-musl": ["@parcel/watcher-linux-arm-musl@2.5.1", "", { "os": "linux", "cpu": "arm" }, "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q=="], + + "@parcel/watcher-linux-arm64-glibc": ["@parcel/watcher-linux-arm64-glibc@2.5.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w=="], + + "@parcel/watcher-linux-arm64-musl": ["@parcel/watcher-linux-arm64-musl@2.5.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg=="], + + "@parcel/watcher-linux-x64-glibc": ["@parcel/watcher-linux-x64-glibc@2.5.1", "", { "os": "linux", "cpu": "x64" }, "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A=="], + + "@parcel/watcher-linux-x64-musl": ["@parcel/watcher-linux-x64-musl@2.5.1", "", { "os": "linux", "cpu": "x64" }, "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg=="], + + "@parcel/watcher-win32-arm64": ["@parcel/watcher-win32-arm64@2.5.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw=="], + + "@parcel/watcher-win32-ia32": ["@parcel/watcher-win32-ia32@2.5.1", "", { "os": "win32", "cpu": "ia32" }, "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ=="], + + "@parcel/watcher-win32-x64": ["@parcel/watcher-win32-x64@2.5.1", "", { "os": "win32", "cpu": "x64" }, "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA=="], + + "@tailwindcss/cli": ["@tailwindcss/cli@4.3.3", "", { "dependencies": { "@parcel/watcher": "2.5.1", "@tailwindcss/node": "4.3.3", "@tailwindcss/oxide": "4.3.3", "enhanced-resolve": "^5.24.1", "mri": "^1.2.0", "picocolors": "^1.1.1", "tailwindcss": "4.3.3" }, "bin": { "tailwindcss": "./dist/index.mjs" } }, "sha512-ZvS/n1ZHOBKcVlhkt8l5NNr1EDXk1NboYO5CYDOs6NUmvT9z6bzkwsosaJftY57T/3gWNzWMJzIXLodZC8ssdw=="], + + "@tailwindcss/node": ["@tailwindcss/node@4.3.3", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "^5.24.1", "jiti": "^2.7.0", "lightningcss": "1.32.0", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.3.3" } }, "sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg=="], + + "@tailwindcss/oxide": ["@tailwindcss/oxide@4.3.3", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.3.3", "@tailwindcss/oxide-darwin-arm64": "4.3.3", "@tailwindcss/oxide-darwin-x64": "4.3.3", "@tailwindcss/oxide-freebsd-x64": "4.3.3", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.3", "@tailwindcss/oxide-linux-arm64-gnu": "4.3.3", "@tailwindcss/oxide-linux-arm64-musl": "4.3.3", "@tailwindcss/oxide-linux-x64-gnu": "4.3.3", "@tailwindcss/oxide-linux-x64-musl": "4.3.3", "@tailwindcss/oxide-wasm32-wasi": "4.3.3", "@tailwindcss/oxide-win32-arm64-msvc": "4.3.3", "@tailwindcss/oxide-win32-x64-msvc": "4.3.3" } }, "sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA=="], + + "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.3.3", "", { "os": "android", "cpu": "arm64" }, "sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw=="], + + "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.3.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw=="], + + "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.3.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw=="], + + "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.3.3", "", { "os": "freebsd", "cpu": "x64" }, "sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw=="], + + "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.3.3", "", { "os": "linux", "cpu": "arm" }, "sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ=="], + + "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.3.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w=="], + + "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.3.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA=="], + + "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.3.3", "", { "os": "linux", "cpu": "x64" }, "sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w=="], + + "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.3.3", "", { "os": "linux", "cpu": "x64" }, "sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img=="], + + "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.3.3", "", { "dependencies": { "@emnapi/core": "^1.11.1", "@emnapi/runtime": "^1.11.1", "@emnapi/wasi-threads": "^1.2.2", "@napi-rs/wasm-runtime": "^1.1.4", "@tybys/wasm-util": "^0.10.2", "tslib": "^2.8.1" }, "cpu": "none" }, "sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ=="], + + "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.3.3", "", { "os": "win32", "cpu": "arm64" }, "sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ=="], + + "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.3.3", "", { "os": "win32", "cpu": "x64" }, "sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw=="], + + "@wrnexus/compiler": ["@wrnexus/compiler@0.3.4", "", { "dependencies": { "@wrnexus/syntax": "^0.3.4" } }, "sha512-jcVbA1349RQ+/BLOGmmZ8fjdsGrFGs/8X+raSdhea9RIKLqDFMrloJ/p/MVLZfYLYOREt4ZxguWN6AVNxDf64g=="], + + "@wrnexus/core": ["@wrnexus/core@0.3.4", "", {}, "sha512-Ug0M2aDjaqcjjfmGitApaQYLHqbLQ9K8VFNfXuU+fL/qisyW3iN7AHCqxqfBW4uNyQvtNavbNN9d/iCZAi0pFQ=="], + + "@wrnexus/csr": ["@wrnexus/csr@0.3.4", "", { "dependencies": { "@wrnexus/core": "^0.3.4" } }, "sha512-6zjK2usMWD2psI19kLaEdmOAOTPFQFi0TF01gd0JkBi3FphXbi+mIrzEplMyVQN1U3jJZpBf2Gto0+V02tCudQ=="], + + "@wrnexus/db": ["@wrnexus/db@0.3.4", "", {}, "sha512-txcjaw3wGckNBW8Zsn4lS46el0+ntZQcbdiR3avOyXXrq0fKau0Sk23fgCP/v0EtNMJc0J2bQUypU1phUuFFcg=="], + + "@wrnexus/dev-server": ["@wrnexus/dev-server@0.3.4", "", { "dependencies": { "@wrnexus/compiler": "^0.3.4", "@wrnexus/core": "^0.3.4", "@wrnexus/csr": "^0.3.4", "@wrnexus/db": "^0.3.4", "@wrnexus/dev-toolbar": "^0.3.4", "@wrnexus/i18n": "^0.3.4", "@wrnexus/plugin": "^0.3.4", "@wrnexus/pubsub": "^0.3.4", "@wrnexus/router": "^0.3.4", "@wrnexus/ssr": "^0.3.4", "@wrnexus/styles": "^0.3.4", "@wrnexus/ui": "^0.3.4", "@wrnexus/uploader": "^0.3.4", "@wrnexus/validation": "^0.3.4" } }, "sha512-oPNnqalMAN8Uu5WPJgVeoDo5zo4qPi6t73scIgZ8WErtRYhqc2pRaH5EVAOppL5B50NFr5VUeptqgOKp5T20Eg=="], + + "@wrnexus/dev-toolbar": ["@wrnexus/dev-toolbar@0.3.4", "", {}, "sha512-LCHpKS3z8rDiJ375wGyxltg5rzB8dt70dDlUZGoZWgzBv9lSsl0yLR0l1bOFeGsgtz1tMza5ngXafsk/CDjs4w=="], + + "@wrnexus/helpers": ["@wrnexus/helpers@0.3.4", "", { "dependencies": { "@wrnexus/core": "^0.3.4" } }, "sha512-btniCblXGsSmEcpMkh8AMREBB+nEjmd3Qi/qsvrJWbIWLL0AZCHntXkNOlomhtcKlaUo0P9lOTcqyXnejWA4ig=="], + + "@wrnexus/i18n": ["@wrnexus/i18n@0.3.4", "", { "dependencies": { "@wrnexus/core": "^0.3.4" } }, "sha512-t3HNlaLW8aRXxgY+suhVk9kwY0fWmNUkHh4o1VnvhgFpPV+kSCDl7as5ug4m5MY0uQ33pW8fqqSTh8NML//2DQ=="], + + "@wrnexus/plugin": ["@wrnexus/plugin@0.3.4", "", { "dependencies": { "@wrnexus/syntax": "^0.3.4" } }, "sha512-DQ0d0dAkwKICDQKaUX1Uw6kcr/3pFr69fWDY7sBReTr53O6D0gLbvCIYAR6K5TVili5+oWqa85Yr+0M/CGmCZg=="], + + "@wrnexus/pubsub": ["@wrnexus/pubsub@0.3.4", "", {}, "sha512-0eKJpoQ+Agft2thont0O5zTNhdfOiECP0rZ/+uXfXLcW/pzDJN2gOz8H1BaXjiuhEVMSZ5NB/3d7BiSYF3/zwg=="], + + "@wrnexus/router": ["@wrnexus/router@0.3.4", "", { "dependencies": { "@wrnexus/compiler": "^0.3.4", "@wrnexus/core": "^0.3.4" } }, "sha512-1JKbcxFsVyKO+JaHTrgIpBwCEQxmBfQufAF73J8Y25M1h0F1yepuFnCln1X7GF8VHWYWYwgQf64yJ0o18QWxjg=="], + + "@wrnexus/ssr": ["@wrnexus/ssr@0.3.4", "", { "dependencies": { "@wrnexus/core": "^0.3.4" } }, "sha512-WFX3LYCl4mQ0+3oRAzRmoeLIpwYHyYDGpLqg/HmxWLbUqvZzqX9jwoWypvcAK7//x8DF/UGV0LbYf/s3ko3gQg=="], + + "@wrnexus/styles": ["@wrnexus/styles@0.3.4", "", { "dependencies": { "@wrnexus/core": "^0.3.4", "@wrnexus/plugin": "^0.3.4", "@wrnexus/uploader": "^0.3.4" } }, "sha512-w8OjokQEfIrhVrIQsEOhUJJ4XqVLoo7Zz5kJEYox/69LCBXQioRq6UIti7ZNvG0vrQYFE6XCfumvN69A6kMF4g=="], + + "@wrnexus/syntax": ["@wrnexus/syntax@0.3.4", "", {}, "sha512-Op0ylbSP1pM0C+T/7eH5Z6P9QXRY4KvbELUwBYbhWhZF1gJAPCWgm+wnUnBN/K/aHqgkMKWda8ojqZ9cDJPRIw=="], + + "@wrnexus/ui": ["@wrnexus/ui@0.3.4", "", { "dependencies": { "@wrnexus/core": "^0.3.4" } }, "sha512-rp304L+ko77keevX7uqGXv1nMbvsgisZYzFWm2cV+rDcLGm+Fdj8K3ixVBkXUsynu09HTcgR+8A+idi+1c0yLg=="], + + "@wrnexus/uploader": ["@wrnexus/uploader@0.3.4", "", { "dependencies": { "@wrnexus/core": "^0.3.4" } }, "sha512-lg45w5gyxoEidcS/61chW3FeLTEQ+mU6q8L/x3LqrwWwTBD3aE+67vvfigs37H7g6WjBGxs4YxseqPQGDhFvdw=="], + + "@wrnexus/validation": ["@wrnexus/validation@0.3.4", "", {}, "sha512-pSAnBv6WaxW7VfT0As19l9iJE3n61qdEE8EiEU9QYS7YHNXVsY5Af+aqW6uj2mSO64tUxmujUK4kPwd/ezjiow=="], + + "boolbase": ["boolbase@1.0.0", "", {}, "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="], + + "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="], + + "commander": ["commander@11.1.0", "", {}, "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ=="], + + "css-select": ["css-select@5.2.2", "", { "dependencies": { "boolbase": "^1.0.0", "css-what": "^6.1.0", "domhandler": "^5.0.2", "domutils": "^3.0.1", "nth-check": "^2.0.1" } }, "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw=="], + + "css-tree": ["css-tree@3.2.1", "", { "dependencies": { "mdn-data": "2.27.1", "source-map-js": "^1.2.1" } }, "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA=="], + + "css-what": ["css-what@6.2.2", "", {}, "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA=="], + + "csso": ["csso@5.0.5", "", { "dependencies": { "css-tree": "~2.2.0" } }, "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ=="], + + "detect-libc": ["detect-libc@1.0.3", "", { "bin": { "detect-libc": "./bin/detect-libc.js" } }, "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg=="], + + "dom-serializer": ["dom-serializer@2.0.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", "entities": "^4.2.0" } }, "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="], + + "domelementtype": ["domelementtype@2.3.0", "", {}, "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="], + + "domhandler": ["domhandler@5.0.3", "", { "dependencies": { "domelementtype": "^2.3.0" } }, "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w=="], + + "domutils": ["domutils@3.2.2", "", { "dependencies": { "dom-serializer": "^2.0.0", "domelementtype": "^2.3.0", "domhandler": "^5.0.3" } }, "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw=="], + + "enhanced-resolve": ["enhanced-resolve@5.24.3", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.3.3" } }, "sha512-PwKooW9JUzh5chmYfHM3IQl5OkK2u2Nm011MgeZrss3JmFraUx/fqrf78kk8GUMYoibx/14MdwTl/1WKkG7TpQ=="], + + "entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="], + + "fflate": ["fflate@0.8.3", "", {}, "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA=="], + + "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="], + + "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="], + + "import-meta-resolve": ["import-meta-resolve@4.2.0", "", {}, "sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg=="], + + "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="], + + "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="], + + "is-number": ["is-number@7.0.0", "", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="], + + "jiti": ["jiti@2.7.0", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ=="], + + "lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="], + + "lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="], + + "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.32.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ=="], + + "lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.32.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w=="], + + "lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.32.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig=="], + + "lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.32.0", "", { "os": "linux", "cpu": "arm" }, "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw=="], + + "lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ=="], + + "lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg=="], + + "lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA=="], + + "lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg=="], + + "lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.32.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw=="], + + "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.32.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q=="], + + "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="], + + "mdn-data": ["mdn-data@2.27.1", "", {}, "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ=="], + + "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="], + + "modern-tar": ["modern-tar@0.7.7", "", {}, "sha512-t9VmxaqrmANnEOBhpSDI6HD192Ge48k8vmWqQQL7hSFEqHEYwZbbsu49+aKLWZeRvFs3j1pMhXOqqF4kPlvjkQ=="], + + "mri": ["mri@1.2.0", "", {}, "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="], + + "node-addon-api": ["node-addon-api@7.1.1", "", {}, "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ=="], + + "nth-check": ["nth-check@2.1.1", "", { "dependencies": { "boolbase": "^1.0.0" } }, "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w=="], + + "package-manager-detector": ["package-manager-detector@1.8.0", "", {}, "sha512-yQA4H19AmPEoMUeavPMDIe1higySl/gH/yaQrkT/s07Qp+7pp2hYz30N3z2l5BkjVkF9Ow6o0wjJamm2y7Sn0A=="], + + "pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="], + + "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="], + + "picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="], + + "sax": ["sax@1.6.0", "", {}, "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA=="], + + "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="], + + "svgo": ["svgo@4.0.2", "", { "dependencies": { "commander": "^11.1.0", "css-select": "^5.1.0", "css-tree": "^3.0.1", "css-what": "^6.1.0", "csso": "^5.0.5", "picocolors": "^1.1.1", "sax": "^1.5.0" }, "bin": "./bin/svgo.js" }, "sha512-ekx94z1rRc5LDi6oSUaeRnYhd0UOJxdtQCL2rF8xpWxD3TPAsISWOrxezqGovqS38GRZOdpDfvQe3ts6F7nsng=="], + + "tailwindcss": ["tailwindcss@4.3.3", "", {}, "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ=="], + + "tapable": ["tapable@2.3.3", "", {}, "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A=="], + + "tinyexec": ["tinyexec@1.2.4", "", {}, "sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg=="], + + "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="], + + "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="], + + "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.11.2", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.2", "tslib": "^2.4.0" }, "bundled": true }, "sha512-TC8MkTuZUtcTSiFeuC0ksCh9QIJ5+F21MvZ4Wn4ORfYaFJ/0dsiudv5tVkejgwZlwQ39jL9WWDe2lz8x0WglOA=="], + + "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.11.2", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-kyOl3X0DuTiT1h2ft8r2fYO8JYtU9a9Xis/zBSiGArNaagCOWx90N1k2wxp18czFDH+OgcWGb5ZP/XMt3dcyPA=="], + + "@tailwindcss/oxide-wasm32-wasi/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.2", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA=="], + + "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.6", "", { "dependencies": { "@tybys/wasm-util": "^0.10.3" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" }, "bundled": true }, "sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg=="], + + "@tailwindcss/oxide-wasm32-wasi/@tybys/wasm-util": ["@tybys/wasm-util@0.10.3", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg=="], + + "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="], + + "csso/css-tree": ["css-tree@2.2.1", "", { "dependencies": { "mdn-data": "2.0.28", "source-map-js": "^1.0.1" } }, "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA=="], + + "lightningcss/detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="], + + "csso/css-tree/mdn-data": ["mdn-data@2.0.28", "", {}, "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="], + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..758dc89 --- /dev/null +++ b/package.json @@ -0,0 +1,35 @@ +{ + "name": "component-showcase", + "version": "0.1.0", + "private": true, + "type": "module", + "scripts": { + "generate": "node scripts/generate-showcase.mjs", + "dev": "bun run generate && bun run ../../packages/cli/src/index.ts dev .", + "build": "bun run generate && bun run ../../packages/cli/src/index.ts build .", + "typecheck": "tsc --noEmit -p tsconfig.json", + "test": "bun test test", + "check": "bun run generate && bun run typecheck && bun run test && bun run build", + "start": "bun dist/server.js", + "production": "bun run build && bun run start", + "doctor": "wrnexus doctor .", + "config:explain": "wrnexus config . --explain", + "analyze": "wrnexus analyze .", + "update:preview": "wrnexus update . --dry-run" + }, + "dependencies": { + "@wrnexus/core": "^0.3.4", + "@wrnexus/ui": "^0.3.4", + "@wrnexus/helpers": "^0.3.4", + "@wrnexus/dev-server": "^0.3.4", + "@wrnexus/syntax": "^0.3.4", + "@wrnexus/plugin": "^0.3.4" + }, + "devDependencies": { + "@iconify-json/lucide": "^1.2.118", + "@iconify/tailwind4": "^1.2.3", + "@tailwindcss/cli": "^4.0.0", + "tailwindcss": "^4.0.0", + "typescript": "^5.5.0" + } +} diff --git a/public/llms.txt b/public/llms.txt new file mode 100644 index 0000000..34305cc --- /dev/null +++ b/public/llms.txt @@ -0,0 +1,276 @@ +# 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 ` / `component ` / `api ` / `schema `. + +## 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

+ 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/) + 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/.wrn ("none" to skip) + + state count = 0 // optional: seeds client-reactive state (omit for pure SSR) + + seo { + title = "Home" + description = "..." + canonical = "/" + } + + view { +

Hello

+

Count is {count}, doubled is {count * 2}.

+ +
+ } + + 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 { + + } +} +``` + +Mount it from any page/component: `
`. +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"`. +- `
` — mount a component (attrs become string props, coerced). +- `` / `` — component/layout slots; fill with `
…
`. +- **Server loop (DB/list/table):** `{#each as [, ]} …rows… {:empty} …fallback… {/each}` — iterates SSR data on the server and renders markup per item. `{item.field}` interpolates (HTML-escaped, XSS-safe). `` 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 } … {:else if } … {:else} … {/if}` — renders the first truthy branch on the server. `` can reference `ssr` data, or the `item`/`index` of an enclosing `{#each}`. Works at page level and inside loops (e.g. `{#if r.active}●{:else}○{/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: `
`, ``. +- 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 { + + + {#each rows as r, i} + + + + + + {:empty} + + {/each} + +
#{i}{r.name}{r.email}
No submissions yet.
+ } +} +``` + +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` (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: `
` + `` (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 # scaffold a new app +wrnexus update --latest # deps + syntax/config migrations + verification +wrnexus generate page # scaffold a page (aliases: g p) +wrnexus generate component | api | schema +wrnexus db migrate | rollback | status | new [--from-models] | generate | seed +wrnexus eject # 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 `. +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. diff --git a/public/playground.js b/public/playground.js new file mode 100644 index 0000000..5d64f91 --- /dev/null +++ b/public/playground.js @@ -0,0 +1,313 @@ +/* global AbortController, DOMParser, HTMLFormElement, HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement, Node, URL, URLSearchParams, clearTimeout, document, fetch, navigator, setTimeout, window */ + +(() => { + const SELECTOR = "[data-playground]"; + const DESIGN_DEFAULTS = { + style: "default", + palette: "violet", + mode: "system", + font: "jakarta", + scale: "default", + }; + const htmlPolicy = window.trustedTypes?.createPolicy("wrnexus-playground", { + createHTML: (value) => value, + }); + let request; + let timer; + + function storedDesign() { + const root = document.documentElement.dataset; + return { + style: root.uiStyle || DESIGN_DEFAULTS.style, + palette: root.uiPalette || DESIGN_DEFAULTS.palette, + mode: root.uiMode || DESIGN_DEFAULTS.mode, + font: root.uiFont || DESIGN_DEFAULTS.font, + scale: root.uiScale || DESIGN_DEFAULTS.scale, + }; + } + + function setCookie(name, value) { + document.cookie = `${name}=${encodeURIComponent(value)};path=/;max-age=31536000;samesite=lax`; + } + + function applyDesign(settings, persist = true) { + const root = document.documentElement; + root.dataset.uiStyle = settings.style; + root.dataset.uiPalette = settings.palette; + root.dataset.uiMode = settings.mode; + root.dataset.uiFont = settings.font; + root.dataset.uiScale = settings.scale; + + const dark = + settings.mode === "dark" || + (settings.mode === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches); + root.dataset.theme = dark ? "dark" : "light"; + + for (const control of document.querySelectorAll("[data-design-setting]")) { + control.value = settings[control.dataset.designSetting] || ""; + } + if (persist) { + setCookie("wrn-ui-style", settings.style); + setCookie("wrn-ui-palette", settings.palette); + setCookie("wrn-ui-mode", settings.mode); + setCookie("wrn-ui-font", settings.font); + setCookie("wrn-ui-scale", settings.scale); + setCookie("wire-theme", dark ? "dark" : "light"); + } + } + + let design = storedDesign(); + applyDesign(design, false); + for (const link of document.querySelectorAll(".docs-directory a[href]")) { + const target = new URL(link.href, window.location.origin); + if (target.pathname === window.location.pathname) link.setAttribute("aria-current", "page"); + } + window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => { + if (design.mode === "system") applyDesign(design); + }); + + function sourceAttribute(value) { + return String(value) + .replaceAll("&", "&") + .replaceAll('"', """) + .replaceAll("<", "<") + .replaceAll(">", ">"); + } + + function updateCode(playground) { + const form = playground.querySelector("[data-playground-form]"); + const code = playground.querySelector("[data-playground-code]"); + if (!(form instanceof HTMLFormElement) || !code) return; + + const component = playground.getAttribute("data-playground-component") || "Component"; + const publicTag = playground.getAttribute("data-playground-public-tag") === "true"; + const hasSlot = playground.getAttribute("data-playground-has-slot") === "true"; + const attributes = []; + + for (const field of form.elements) { + if ( + !( + field instanceof HTMLInputElement || + field instanceof HTMLTextAreaElement || + field instanceof HTMLSelectElement + ) || + !field.name.startsWith("pg_") + ) + continue; + + const name = field.name.slice(3); + if (field instanceof HTMLInputElement && field.type === "checkbox") { + if (field.checked) attributes.push(name); + } else if (field.value !== "") { + const value = field.hasAttribute("data-playground-json") + ? `'${field.value.replaceAll("'", "\\'")}'` + : `"${field.value.replaceAll('"', '\\"')}"`; + attributes.push(`${name}=${value}`); + } + } + + const tag = publicTag ? component : "div"; + const mount = publicTag ? [] : [`data-component="${sourceAttribute(component)}"`]; + const lines = [...mount, ...attributes].map((attribute) => ` ${attribute}`).join("\n"); + const opening = lines ? `<${tag}\n${lines}` : `<${tag}`; + code.textContent = hasSlot + ? `${opening}>\n \n` + : `${opening}\n/>`; + } + + function valuesFrom(form) { + const params = new URLSearchParams(); + let valid = true; + + for (const field of form.elements) { + if (!( + field instanceof HTMLInputElement || + field instanceof HTMLTextAreaElement || + field instanceof HTMLSelectElement + )) + continue; + if (!field.name) continue; + + const error = field.closest(".playground-field")?.querySelector("[data-playground-error]"); + if (field.hasAttribute("data-playground-json")) { + try { + JSON.parse(field.value); + field.removeAttribute("aria-invalid"); + if (error) error.textContent = ""; + } catch { + field.setAttribute("aria-invalid", "true"); + if (error) error.textContent = "Enter valid JSON"; + valid = false; + continue; + } + } + + params.set(field.name, field.type === "checkbox" ? String(field.checked) : field.value); + } + + return valid ? params : null; + } + + async function update(playground) { + const form = playground.querySelector("[data-playground-form]"); + const preview = playground.querySelector("[data-playground-preview]"); + const status = playground.querySelector("[data-playground-status]"); + if (!(form instanceof HTMLFormElement) || !preview || !status) return; + + const params = valuesFrom(form); + if (!params) { + status.textContent = "Fix the highlighted JSON value."; + return; + } + + request?.abort(); + request = new AbortController(); + const url = new URL(window.location.href); + for (const key of [...url.searchParams.keys()]) { + if (key.startsWith("pg_")) url.searchParams.delete(key); + } + for (const [key, value] of params) url.searchParams.set(key, value); + + playground.setAttribute("data-updating", "true"); + status.textContent = "Updating preview…"; + + try { + const response = await fetch(url, { + headers: { "x-wrnexus-playground": "1" }, + signal: request.signal, + }); + if (!response.ok) throw new Error(`Preview request failed (${response.status})`); + const responseHtml = await response.text(); + const parsed = new DOMParser().parseFromString( + htmlPolicy ? htmlPolicy.createHTML(responseHtml) : responseHtml, + "text/html", + ); + const next = parsed.querySelector("[data-playground-preview]"); + if (!next) throw new Error("Preview markup was not returned"); + + window.__wrnexusDisposeBehaviors?.(preview); + preview.replaceChildren( + ...Array.from(next.childNodes, (node) => document.importNode(node, true)), + ); + window.__wrnexusHydrateScopes?.(preview); + window.__wrnexusHydrateCsrFetches?.(preview); + status.textContent = "Preview updated"; + } catch (error) { + if (error?.name !== "AbortError") { + status.textContent = error instanceof Error ? error.message : "Unable to update preview"; + } + } finally { + playground.removeAttribute("data-updating"); + } + } + + function schedule(playground) { + updateCode(playground); + clearTimeout(timer); + timer = setTimeout(() => update(playground), 180); + } + + document.addEventListener("input", (event) => { + const playground = event.target.closest?.(SELECTOR); + if (playground) schedule(playground); + }); + + document.addEventListener("change", (event) => { + const playground = event.target.closest?.(SELECTOR); + if (playground) schedule(playground); + }); + + document.addEventListener("reset", (event) => { + const playground = event.target.closest?.(SELECTOR); + if (playground) + setTimeout(() => { + updateCode(playground); + update(playground); + }, 0); + }); + + document.addEventListener("click", async (event) => { + const designToggle = event.target.closest?.("[data-design-panel-toggle]"); + if (designToggle) { + document.documentElement.toggleAttribute("data-design-panel-open"); + return; + } + + if (event.target.closest?.("[data-design-reset]")) { + design = { ...DESIGN_DEFAULTS }; + applyDesign(design); + return; + } + + const copyText = event.target.closest?.("[data-copy-text]"); + if (copyText) { + try { + await navigator.clipboard.writeText(copyText.dataset.copyText || ""); + copyText.setAttribute("data-copied", "true"); + setTimeout(() => copyText.removeAttribute("data-copied"), 1200); + } catch { + // Clipboard access may be blocked in an insecure local context. + } + return; + } + + const menuToggle = event.target.closest?.("[data-docs-menu-toggle]"); + if (menuToggle) { + document.documentElement.toggleAttribute("data-docs-menu-open"); + return; + } + + if (event.target.closest?.("[data-docs-component-link]")) { + document.documentElement.removeAttribute("data-docs-menu-open"); + } + + const copy = event.target.closest?.("[data-playground-copy]"); + if (!copy) return; + const playground = copy.closest(SELECTOR); + const code = playground?.querySelector("[data-playground-code]"); + const status = playground?.querySelector("[data-playground-status]"); + if (!code || !status) return; + + try { + await navigator.clipboard.writeText(code.textContent || ""); + status.textContent = "Component code copied"; + const label = copy.lastChild; + if (label?.nodeType === Node.TEXT_NODE) label.textContent = "Copied"; + setTimeout(() => { + if (label?.nodeType === Node.TEXT_NODE) label.textContent = "Copy"; + }, 1400); + } catch { + status.textContent = "Copy failed. Select the code and copy it manually."; + } + }); + + document.addEventListener("input", (event) => { + const setting = event.target.closest?.("[data-design-setting]"); + if (setting) { + design = { ...design, [setting.dataset.designSetting]: setting.value }; + applyDesign(design); + return; + } + if (!event.target.matches?.("[data-docs-search]")) return; + const query = event.target.value.trim().toLowerCase(); + const links = [...document.querySelectorAll("[data-docs-component-link]")]; + let visible = 0; + for (const link of links) { + const matches = !query || link.textContent.toLowerCase().includes(query); + link.hidden = !matches; + if (matches) visible++; + } + for (const group of document.querySelectorAll(".docs-directory-group")) { + group.hidden = !group.querySelector("[data-docs-component-link]:not([hidden])"); + } + const empty = document.querySelector("[data-docs-empty]"); + if (empty) empty.hidden = visible > 0; + }); + + document.addEventListener("keydown", (event) => { + if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") { + event.preventDefault(); + document.querySelector("[data-docs-search]")?.focus(); + } + }); +})(); diff --git a/scripts/generate-showcase.mjs b/scripts/generate-showcase.mjs new file mode 100644 index 0000000..51037a3 --- /dev/null +++ b/scripts/generate-showcase.mjs @@ -0,0 +1,1724 @@ +import { mkdirSync, readFileSync, readdirSync, unlinkSync, writeFileSync } from "node:fs"; +import { dirname, join } from "node:path"; +import process from "node:process"; +import { fileURLToPath } from "node:url"; + +const exampleRoot = join(dirname(fileURLToPath(import.meta.url)), ".."); +const workspaceRoot = join(exampleRoot, "..", ".."); +const referencePath = join(workspaceRoot, "packages", "ui", "component-reference.json"); +const uiComponentsPath = join(workspaceRoot, "packages", "ui", "components"); +const pagesDir = join(exampleRoot, "app", "pages"); +const detailPagesDir = join(pagesDir, "components"); +const layoutsDir = join(exampleRoot, "app", "layouts"); +const reference = JSON.parse(readFileSync(referencePath, "utf8")); + +const displayName = (name) => name.replace(/([a-z0-9])([A-Z])/g, "$1 $2"); +const baseSlugOf = (name) => name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(); +const slugCounts = new Map(); +for (const component of reference.components) { + const slug = baseSlugOf(component.name); + slugCounts.set(slug, (slugCounts.get(slug) ?? 0) + 1); +} +const slugOf = (name) => { + const slug = baseSlugOf(name); + if (slugCounts.get(slug) === 1) return slug; + const component = reference.components.find((entry) => entry.name === name); + return `${slug}-${component?.category ?? "component"}`; +}; +const titleCase = (value) => + value + .split("-") + .map((word) => word[0].toUpperCase() + word.slice(1)) + .join(" "); +const identifier = (value) => + value.replace(/(^|[^A-Za-z0-9_])([A-Za-z0-9])/g, (_, _sep, char) => char.toUpperCase()); +const escapeText = (value) => + String(value).replaceAll("&", "&").replaceAll("<", "<").replaceAll(">", ">"); +// WRN uses braces for reactive expressions. Encode braces inside documentation +// code so hydration keeps them as literal, copyable source text. +const escapeCode = (value) => escapeText(value).replaceAll("{", "{").replaceAll("}", "}"); +const escapeAttribute = (value) => + escapeText(value).replaceAll('"', """).replaceAll("'", "'"); +const jsonAttribute = (value) => escapeAttribute(JSON.stringify(value)); + +function sampleItem(component, index, variation) { + const number = index + 1; + const labels = ["Primary workflow", "Secondary workflow", "Advanced workflow"]; + return { + id: `${slugOf(component.name)}-${variation}-${number}`, + key: `${slugOf(component.name)}-${variation}-${number}`, + value: index === 0 ? "primary" : "secondary", + label: index === 0 ? labels[variation] : "Additional option", + title: index === 0 ? labels[variation] : "Supporting example", + description: + variation === 0 + ? "A clean default configuration for everyday product interfaces." + : variation === 1 + ? "A compact configuration designed for dense application layouts." + : "A richer configuration with more supporting information and actions.", + text: index === 0 ? "A configurable sample message." : "Another configurable message.", + href: `#${slugOf(component.name)}-demo`, + actionHref: `#${slugOf(component.name)}-demo`, + actionLabel: variation === 2 ? "Explore workflow" : "View details", + icon: + variation === 0 + ? "icon-[lucide--sparkles]" + : variation === 1 + ? "icon-[lucide--zap]" + : "icon-[lucide--circle-check]", + iconClass: + variation === 0 + ? "icon-[lucide--sparkles]" + : variation === 1 + ? "icon-[lucide--zap]" + : "icon-[lucide--circle-check]", + variant: variation === 0 ? "primary" : variation === 1 ? "secondary" : "success", + status: variation === 2 ? "Complete" : "Active", + time: variation === 0 ? "09:30" : variation === 1 ? "10:15" : "11:45", + current: index === 0, + selected: index === 0, + checked: index === 0, + disabled: variation === 2 && index === 1, + outgoing: index === 1, + open: true, + number, + count: number * (variation + 2) * 8, + percentage: variation === 0 ? 72 : variation === 1 ? 48 : 91, + color: variation === 0 ? "#7c3aed" : variation === 1 ? "#0284c7" : "#059669", + target: "_self", + ariaLabel: `Open ${labels[variation].toLowerCase()} ${number}`, + items: [ + { label: "Nested option A", value: "nested-a" }, + { label: "Nested option B", value: "nested-b" }, + ], + links: [ + { label: "Documentation", href: "#documentation" }, + { label: "API reference", href: "#api-reference" }, + ], + values: ["Included", variation === 2 ? "Unlimited" : "Standard"], + }; +} + +function sampleArray(prop, component, variation) { + const name = prop.name.toLowerCase(); + if (name.includes("chartlabel") || name === "labels") + return variation === 1 ? ["Q1", "Q2", "Q3", "Q4"] : ["Mon", "Tue", "Wed", "Thu", "Fri"]; + if (name === "data" || name.includes("series")) + return variation === 0 + ? [18, 32, 27, 48, 64] + : variation === 1 + ? [64, 51, 43, 35] + : [24, 46, 72, 88]; + if (name === "pages") + return [ + { number: 1, href: "#page-1", current: variation === 0, ellipsis: false }, + { number: 2, href: "#page-2", current: variation !== 0, ellipsis: false }, + { number: 3, href: "#page-3", current: false, ellipsis: false }, + ]; + if (name === "plans") + return [ + { name: "Starter", label: "Starter", value: "starter" }, + { name: "Pro", label: "Pro", value: "pro" }, + { name: "Scale", label: "Scale", value: "scale" }, + ]; + if (name === "features") + return [ + { label: "Team members", values: ["5", "Unlimited", "Unlimited"] }, + { label: "Support", values: ["Email", "Priority", "Dedicated"] }, + { label: "Audit history", values: ["7 days", "90 days", "Custom"] }, + ]; + if (name === "logos") + return ["Acme", "Northstar", "Vertex", "Orbit"].map((logo, index) => ({ + name: logo, + alt: `${logo} logo`, + href: `#${slugOf(component.name)}-demo`, + external: false, + src: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 36'%3E%3Crect width='120' height='36' rx='8' fill='%23${variation === 2 ? "059669" : variation === 1 ? "0284c7" : "7c3aed"}'/%3E%3Ctext x='60' y='23' text-anchor='middle' font-family='Arial' font-size='13' fill='white'%3E${logo}%3C/text%3E%3C/svg%3E`, + order: index, + })); + if (name.includes("navigationcolumns")) + return [ + { + title: "Product", + links: [ + { label: "Overview", href: "#overview" }, + { label: "Pricing", href: "#pricing" }, + ], + }, + { + title: "Resources", + links: [ + { label: "Guides", href: "#guides" }, + { label: "Support", href: "#support" }, + ], + }, + ]; + if (name === "sections") + return [ + { + label: "Product", + value: "product", + description: "Product navigation examples.", + items: [ + { label: "Platform", href: "#platform", description: "Explore the platform." }, + { label: "Security", href: "#security", description: "Review security controls." }, + ], + }, + { + label: "Developers", + value: "developers", + description: "Developer resources.", + items: [{ label: "Documentation", href: "#docs", description: "Read the guides." }], + }, + ]; + if (name === "toasts") + return [ + { + title: variation === 2 ? "Deployment complete" : "Changes saved", + description: + variation === 2 + ? "The production release completed successfully." + : "Your settings were saved successfully.", + variant: "success", + icon: "icon-[lucide--circle-check]", + open: true, + dismissible: true, + dismissLabel: "Dismiss notification", + }, + ]; + if (name === "stages") + return [ + { + title: "Event received", + description: "A customer event started the flow.", + icon: "icon-[lucide--webhook]", + }, + { + title: "Delivery", + description: "Eligible channels are selected.", + icon: "icon-[lucide--send]", + items: [{ label: "Email" }, { label: "SMS" }], + }, + ]; + return [sampleItem(component, 0, variation), sampleItem(component, 1, variation)]; +} + +function defaultValue(prop) { + if (prop.default === null) return undefined; + if (prop.default === "true") return true; + if (prop.default === "false") return false; + if (/^-?\d+(?:\.\d+)?$/.test(prop.default ?? "")) return Number(prop.default); + if (/^".*"$/.test(prop.default ?? "")) { + try { + return JSON.parse(prop.default); + } catch { + return undefined; + } + } + return undefined; +} + +function sampleValue(prop, component, variation) { + const name = prop.name.toLowerCase(); + if (component.name === "AdvancedSelect") { + const configuration = advancedSelectConfiguration(variation); + if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name]; + return undefined; + } + if (component.name === "ComboBox") { + const configuration = comboboxConfiguration(variation); + if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name]; + return undefined; + } + if (component.name === "PinInput") { + const configuration = pinInputConfiguration(variation); + if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name]; + return undefined; + } + if (component.name === "StrongPassword") { + const configuration = strongPasswordConfiguration(variation); + if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name]; + return undefined; + } + if (component.name === "TogglePassword") { + const configuration = togglePasswordConfiguration(variation); + if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name]; + return undefined; + } + const isArray = prop.default === "[]" || prop.type.includes("[]") || prop.type === "array"; + const isObject = prop.default === "{}" || prop.type === "object"; + if (isArray) return sampleArray(prop, component, variation); + if (isObject) return sampleItem(component, 0, variation); + + if (name === "class") return `showcase-instance showcase-instance--${variation + 1}`; + if (component.name === "Button") { + const configurations = [ + { + label: "Save & Submit", + as: "button", + type: "submit", + }, + { + label: "Learn more", + as: "a", + href: "#button-demo", + variant: "outline", + size: "sm", + icon: "icon-[lucide--arrow-right]", + iconPosition: "end", + }, + { label: "Upgrade plan", as: "button", variant: "secondary", size: "lg", pill: true }, + { + label: "Open settings", + as: "button", + ariaLabel: "Open settings", + variant: "ghost", + size: "icon", + icon: "icon-[lucide--settings]", + }, + { + label: "Delete project", + as: "button", + variant: "destructive", + icon: "icon-[lucide--trash-2]", + }, + { label: "Read documentation", as: "a", href: "#button-demo", variant: "link" }, + { label: "Publish", as: "button", loadingLabel: "Publishing…", loading: true }, + { label: "Unavailable action", as: "button", disabled: true, variant: "outline" }, + ]; + const configuration = configurations[variation] ?? configurations[0]; + if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name]; + return undefined; + } + if (name === "controlclass") return variation === 2 ? "shadow-xl" : ""; + if (prop.type === "boolean") { + if (name === "compact") return variation === 1; + if (name === "fullwidth") return variation === 2; + if (name === "loading" || name === "disabled") return false; + if (name === "open" || name === "visible" || name === "dismissible" || name.startsWith("show")) + return true; + return defaultValue(prop) ?? variation === 2; + } + if (prop.type === "number") { + if (name === "value") return 36 + variation * 24; + if (name.includes("count") || name.includes("total") || name.includes("page")) + return 3 + variation * 4; + return defaultValue(prop) ?? variation + 1; + } + if (name.includes("arialabel")) return `${displayName(component.name)} ${variation + 1} example`; + if (name === "title" || name.endsWith("title")) + return variation === 0 + ? `${displayName(component.name)} example` + : variation === 1 + ? `Compact ${displayName(component.name)}` + : `Advanced ${displayName(component.name)}`; + if (name.includes("description") || name === "summary") + return variation === 0 + ? `A polished default ${displayName(component.name).toLowerCase()} for a modern application.` + : variation === 1 + ? "A compact configuration for dashboards and dense product surfaces." + : "A richer configuration demonstrating additional content and hierarchy."; + if (name === "label" || name.endsWith("label")) + return variation === 0 + ? displayName(component.name) + : variation === 1 + ? "Compact example" + : "Advanced example"; + if (name.includes("placeholder")) + return variation === 2 ? "Search by name, email, or identifier" : "Enter a sample value"; + if (name.includes("email")) return variation === 2 ? "team@example.com" : "developer@example.com"; + if (name.includes("href") || name === "action") { + if (component.name === "Button" && variation === 0) return ""; + return `#${slugOf(component.name)}-demo`; + } + if (name === "icon") + return variation === 0 + ? "" + : variation === 1 + ? "icon-[lucide--arrow-right]" + : "icon-[lucide--trash-2]"; + if (name === "variant") + if (component.name === "Button") + return variation === 0 ? "primary" : variation === 1 ? "secondary" : "danger"; + if (name === "variant") + return variation === 0 + ? defaultValue(prop) || "primary" + : variation === 1 + ? "secondary" + : "success"; + if (name === "size") + return variation === 0 ? defaultValue(prop) || "md" : variation === 1 ? "sm" : "lg"; + if (name === "align") return variation === 1 ? "center" : variation === 2 ? "end" : "start"; + if (name === "value") return `sample-${variation + 1}`; + if (name.includes("count") || name.includes("total") || name.includes("page")) return undefined; + if (prop.required) { + return `${displayName(component.name)} sample`; + } + return undefined; +} + +function componentAttributes(component, variation, overrides = {}) { + const attributes = [`data-component="${component.mount}"`]; + for (const prop of component.props) { + const value = Object.hasOwn(overrides, prop.name) + ? overrides[prop.name] + : sampleValue(prop, component, variation); + if (value === undefined) continue; + const encoded = + typeof value === "object" ? jsonAttribute(value) : escapeAttribute(String(value)); + attributes.push(`${prop.name}="${encoded}"`); + } + return attributes; +} + +function componentMount(component, variation = 0, overrides = {}) { + const slotMarkup = component.slots + .map((slot) => + slot === "default" + ? defaultSlotMarkup(component, variation) + : `
${escapeText(displayName(slot))} slot
`, + ) + .join(""); + return `
${slotMarkup}
`; +} + +const structuralDefaultSlots = new Set([ + "Accordion", + "AspectRatio", + "AutoGrid", + "card", + "Cluster", + "CodeTabs", + "Container", + "ContentSection", + "FilterBar", + "ScrollArea", + "Section", + "SidebarLayout", + "SplitLayout", + "Stack", + "Sticky", + "StickyLayout", + "Surface", + "Typography", + "VisuallyHidden", + "Well", + "WideContainer", +]); + +function defaultSlotMarkup(component, variation) { + if (component.name === "Select") + return ''; + if (component.name === "Table") + return "NameStatusProductionActiveStagingReady"; + if (component.name === "Tooltip") + return ''; + if (!structuralDefaultSlots.has(component.name)) return ""; + return `
${variation === 2 ? "Rich supporting content with additional context." : "Composable content area."}
`; +} + +function sourceSnippet(component, variation, overrides = {}) { + const attributes = component.props.flatMap((prop) => { + const value = Object.hasOwn(overrides, prop.name) + ? overrides[prop.name] + : sampleValue(prop, component, variation); + if (value === undefined || value === "" || prop.name === "class") return []; + const declaredDefault = defaultValue(prop); + if ( + declaredDefault !== undefined && + typeof value !== "object" && + String(value) === String(declaredDefault) + ) + return []; + if (typeof value === "object") { + const serialized = JSON.stringify(value, null, 2) + .replaceAll("'", "\\'") + .replaceAll("\n", "\n "); + return [`${prop.name}='${serialized}'`]; + } + return [`${prop.name}="${String(value).replaceAll('"', '\\"')}"`]; + }); + const formattedAttributes = attributes.length ? `\n ${attributes.join("\n ")}` : ""; + const hasPublicComponentTag = /^[A-Z][A-Za-z0-9_]*$/.test(component.mount); + const usesSlot = component.slots.some( + (slot) => slot !== "default" || defaultSlotMarkup(component, variation) !== "", + ); + const slotMarkup = usesSlot + ? `\n \n` + : ""; + + if (hasPublicComponentTag) { + const source = slotMarkup + ? `<${component.mount}${formattedAttributes}>${slotMarkup}` + : formattedAttributes + ? `<${component.mount}${formattedAttributes}\n/>` + : `<${component.mount} />`; + return escapeCode(source); + } + + const mountAttribute = `data-component="${component.mount}"`; + const source = slotMarkup + ? `${slotMarkup}
` + : `
`; + return escapeCode(source); +} + +function propsTable(component) { + if (component.props.length === 0) + return `
No props. Compose this component with slots.
`; + return `
${component.props + .map( + (prop) => + ``, + ) + .join("")}
PropTypeDefaultRequired
${escapeCode(prop.name)}${escapeText(prop.type)}${escapeCode(prop.default ?? "—")}${prop.required ? 'Yes' : "No"}
`; +} + +function playgroundValue(prop, component) { + const sampled = sampleValue(prop, component, 0); + const value = sampled === undefined ? (defaultValue(prop) ?? "") : sampled; + return typeof value === "object" ? JSON.stringify(value, null, 2) : String(value); +} + +function playgroundStateName(prop) { + return `playground_${prop.name.replace(/[^A-Za-z0-9_$]/g, "_")}`; +} + +function playgroundStates(component) { + return component.props + .map((prop) => { + const initial = playgroundValue(prop, component); + return ` state ${playgroundStateName(prop)} = ctx.url.searchParams.get("pg_${prop.name}") ?? ${JSON.stringify(initial)}`; + }) + .join("\n"); +} + +function playgroundMount(component) { + const attributes = [ + `data-component="${component.mount}"`, + ...component.props.map((prop) => `${prop.name}="{${playgroundStateName(prop)}}"`), + ]; + const slotMarkup = component.slots + .map((slot) => + slot === "default" + ? defaultSlotMarkup(component, 0) + : `
${escapeText(displayName(slot))} slot
`, + ) + .join(""); + return `
${slotMarkup}
`; +} + +function playgroundControl(prop, component) { + const value = playgroundValue(prop, component); + const id = `playground-${slugOf(component.name)}-${prop.name}`; + const label = escapeText(displayName(prop.name)); + const meta = `${escapeText(prop.type)}${prop.required ? " · required" : ""}`; + + if (prop.type === "boolean") { + return ``; + } + + const structured = + prop.default === "[]" || + prop.default === "{}" || + prop.type === "array" || + prop.type === "object" || + prop.type.includes("[]"); + if (structured) { + return ``; + } + + const options = playgroundOptions(prop, component, value); + if (options.length > 1) { + return ``; + } + + const inputType = + prop.type === "number" + ? "number" + : prop.name.toLowerCase().includes("color") && /^#[0-9a-f]{6}$/i.test(value) + ? "color" + : "text"; + return ``; +} + +const commonPlaygroundOptions = { + align: ["start", "center", "end"], + alignment: ["start", "center", "end"], + as: ["", "button", "a"], + color: ["primary", "secondary", "success", "warning", "danger", "info"], + direction: ["row", "column"], + iconposition: ["start", "end"], + method: ["get", "post"], + orientation: ["horizontal", "vertical"], + position: ["top", "right", "bottom", "left", "start", "end"], + size: ["default", "xs", "sm", "lg", "icon", "icon-xs", "icon-sm", "icon-lg"], + target: ["_self", "_blank", "_parent", "_top"], + variant: ["default", "outline", "secondary", "ghost", "destructive", "link"], +}; + +function playgroundOptions(prop, component, currentValue) { + if (prop.type !== "string" || prop.name === "class" || prop.name === "controlClass") return []; + + const discovered = new Set(); + const add = (value) => { + if (typeof value === "string" && value.length <= 40) discovered.add(value); + }; + + const common = commonPlaygroundOptions[prop.name.toLowerCase()] ?? []; + for (const option of common) add(option); + if (component.name === "Button" && prop.name === "type") { + for (const option of ["button", "submit", "reset"]) add(option); + } + + const sourcePath = join(uiComponentsPath, `${component.name}.wrn`); + try { + const source = readFileSync(sourcePath, "utf8"); + const escapedName = prop.name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); + const patterns = [ + new RegExp(`\\b${escapedName}\\s*={2,3}\\s*["']([^"'\\n]+)["']`, "g"), + new RegExp(`["']([^"'\\n]+)["']\\s*={2,3}\\s*\\b${escapedName}\\b`, "g"), + ]; + for (const pattern of patterns) { + for (const match of source.matchAll(pattern)) add(match[1]); + } + } catch { + // The generated reference can include virtual components without a same-name source file. + } + + if (common.length === 0 && discovered.size < 2) return []; + + const values = new Set(); + if (typeof currentValue === "string" && currentValue.length <= 40) values.add(currentValue); + const declaredDefault = defaultValue(prop); + if (typeof declaredDefault === "string" && declaredDefault.length <= 40) + values.add(declaredDefault); + for (const option of discovered) values.add(option); + + return [...values]; +} + +function playgroundSection(component) { + const controls = component.props.map((prop) => playgroundControl(prop, component)).join(""); + const publicTag = /^[A-Z][A-Za-z0-9_]*$/.test(component.mount); + return `
+
Interactive playground

Configure ${escapeText(displayName(component.name))}

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
${playgroundMount(component)}
+
+
Component code
+ 
${sourceSnippet(component, 0)}
+
+
+
+ +
Component props${component.props.length} controls
+
${controls || '

This component has no declared props. Its slot content remains composable.

'}
+ +
+
`; +} + +const defaultUses = [ + { + eyebrow: "Recommended", + title: "Production default", + description: "Balanced spacing, hierarchy, and content for the most common product workflow.", + }, + { + eyebrow: "Dense UI", + title: "Compact application", + description: + "A tighter variation for dashboards, side panels, tables, and operational interfaces.", + }, + { + eyebrow: "Extended", + title: "Rich configuration", + description: + "A more expressive variation using additional data, stronger emphasis, and optional states.", + }, +]; + +const buttonUses = [ + { + eyebrow: "Default", + title: "Primary action", + description: "The standard high-emphasis action for forms and product workflows.", + }, + { + eyebrow: "Outline · Small", + title: "Secondary navigation", + description: "A compact link button with an end icon and restrained emphasis.", + }, + { + eyebrow: "Secondary · Large · Pill", + title: "Prominent rounded action", + description: "A large secondary action using the optional pill shape.", + }, + { + eyebrow: "Ghost · Icon", + title: "Accessible icon action", + description: "An icon-only control with its accessible name supplied through props.", + }, + { + eyebrow: "Destructive", + title: "Dangerous action", + description: "A destructive treatment for irreversible or high-risk operations.", + }, + { + eyebrow: "Link", + title: "Inline action", + description: "A low-chrome action that behaves and reads like an inline link.", + }, + { + eyebrow: "Loading", + title: "Pending action", + description: "The button owns its busy state, loading label, spinner, and disabled behavior.", + }, + { + eyebrow: "Disabled", + title: "Unavailable action", + description: "A visibly and semantically disabled control.", + }, +]; + +const advancedSelectTitles = [ + "Default advanced select", + "Grouped options", + "Fixed-position dropdown", + "Placeholder with icon", + "Allow empty selection", + "Multiple selection", + "Multiple selection with optgroups", + "Multiple selection with option templates", + "Multiple selection with counter", + "Multiple selection with conditional counter", + "Counter with option templates", + "Searchable dropdown", + "Minimum search length", + "Search result limit", + "Scroll to selected option", + "Search match mode", + "Search labels and descriptions", + "Tag-style selection", + "Disabled tag selection", + "Option template with icons", + "Option template with avatars", + "Option template with color indicators", + "Advanced select sizes", + "Disabled advanced select", + "Inside a modal", + "Validation states", + "Dynamic validation styling", + "Add or remove options", + "Add or remove options in multiple mode", + "Set a single value programmatically", + "Set multiple values programmatically", + "Remote data source", + "Remote data source (multiple)", + "Remote data tags", + "Option templates with remote data", + "Conditional counter with remote data", + "Avatar template with remote data", + "Preselected values", + "Infinite scroll", + "Inside overflow-hidden containers", + "Destroy and reinitialize", +]; + +const advancedSelectUses = advancedSelectTitles.map((title, index) => ({ + eyebrow: index < 11 ? "Selection" : index < 23 ? "Search & templates" : "Advanced behavior", + title, + description: `Live ${title.toLowerCase()} configuration with copyable component code.`, +})); + +function advancedSelectConfiguration(variation) { + const title = advancedSelectTitles[variation] ?? advancedSelectTitles[0]; + const lower = title.toLowerCase(); + const options = [ + { + value: "design", + label: "Design", + description: "Product and visual design", + icon: "icon-[lucide--palette]", + color: "#8b5cf6", + avatar: + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E", + }, + { + value: "engineering", + label: "Engineering", + description: "Platform and application engineering", + icon: "icon-[lucide--code-2]", + color: "#0ea5e9", + avatar: + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E", + }, + { + value: "growth", + label: "Growth", + description: "Marketing and customer growth", + icon: "icon-[lucide--trending-up]", + color: "#10b981", + avatar: + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E", + }, + { value: "support", label: "Support", description: "Customer operations", disabled: false }, + ]; + const multiple = lower.includes("multiple") || lower.includes("tags"); + const remote = lower.includes("remote") || lower.includes("infinite"); + const grouped = lower.includes("group"); + return { + label: title, + name: `advanced-select-${variation + 1}`, + value: + multiple || lower.includes("placeholder") + ? "" + : lower.includes("preselected") + ? "engineering" + : "design", + values: multiple ? ["design", "engineering"] : [], + options: grouped ? [] : options, + groups: grouped + ? [ + { label: "Product", options: options.slice(0, 2) }, + { label: "Business", options: options.slice(2) }, + ] + : [], + placeholder: lower.includes("placeholder") ? "Choose a workspace" : "Choose a team", + placeholderIcon: lower.includes("placeholder") ? "icon-[lucide--building-2]" : "", + multiple, + searchable: lower.includes("search") || remote || variation === 0, + allowEmpty: lower.includes("empty"), + tags: lower.includes("tag"), + disabled: lower.includes("disabled"), + required: lower.includes("validation"), + invalid: false, + validationMessage: "", + minSearchLength: lower.includes("minimum") ? 3 : remote && !lower.includes("infinite") ? 2 : 0, + searchResultLimit: lower.includes("result limit") ? 3 : 0, + searchMode: lower.includes("match mode") ? "startsWith" : "contains", + showCounter: lower.includes("counter"), + maxSelections: lower.includes("conditional") ? 3 : 0, + optionTemplate: lower.includes("avatar") + ? "avatar" + : lower.includes("color") + ? "color" + : lower.includes("icon") || lower.includes("template") + ? "icon" + : "default", + fixed: lower.includes("fixed") || lower.includes("overflow"), + remote, + remoteUrl: remote ? "/api/teams" : "", + infinite: lower.includes("infinite"), + hasMore: lower.includes("infinite"), + size: lower.includes("sizes") ? "lg" : "default", + }; +} + +const comboboxTitles = [ + "Default autocomplete", + "Local HTML options", + "Grouped suggestions", + "Minimum search length", + "Search result limit", + "Starts-with matching", + "Search labels and descriptions", + "Suggestions with icons", + "Suggestions with avatars", + "Suggestions with color indicators", + "Clearable value", + "Custom text values", + "Preselected value", + "Disabled combobox", + "Validation state", + "Remote data with automatic preload", + "Remote search API", + "Remote query parameters", + "Infinite remote suggestions", + "Fixed-position suggestions", + "JavaScript methods", +]; + +const comboboxUses = comboboxTitles.map((title, index) => ({ + eyebrow: index < 7 ? "Autocomplete" : index < 15 ? "Templates & states" : "Remote & API", + title, + description: `Live ${title.toLowerCase()} combobox with editable autocomplete and copyable component code.`, +})); + +function comboboxConfiguration(variation) { + const title = comboboxTitles[variation] ?? comboboxTitles[0]; + const lower = title.toLowerCase(); + const options = [ + { + value: "design", + label: "Design", + description: "Product and visual design", + icon: "icon-[lucide--palette]", + color: "#8b5cf6", + avatar: + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E", + }, + { + value: "engineering", + label: "Engineering", + description: "Platform and application engineering", + icon: "icon-[lucide--code-2]", + color: "#0ea5e9", + avatar: + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E", + }, + { + value: "growth", + label: "Growth", + description: "Marketing and customer growth", + icon: "icon-[lucide--trending-up]", + color: "#10b981", + avatar: + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E", + }, + { + value: "support", + label: "Support", + description: "Customer operations", + icon: "icon-[lucide--life-buoy]", + color: "#f59e0b", + }, + ]; + const remote = + lower.includes("remote") || lower.includes("infinite") || lower.includes("query parameter"); + const grouped = lower.includes("grouped"); + return { + label: title, + name: `combobox-${variation + 1}`, + value: lower.includes("preselected") ? "engineering" : "", + options: grouped ? [] : options, + groups: grouped + ? [ + { label: "Product", options: options.slice(0, 2) }, + { label: "Business", options: options.slice(2) }, + ] + : [], + placeholder: remote ? "Search remote teams" : "Search teams", + allowCustomValue: lower.includes("custom"), + clearable: true, + disabled: lower.includes("disabled"), + required: lower.includes("validation"), + invalid: false, + validationMessage: "", + minSearchLength: lower.includes("minimum") ? 3 : remote ? 2 : 0, + searchResultLimit: lower.includes("result limit") ? 2 : 0, + searchMode: lower.includes("starts-with") ? "startsWith" : "contains", + optionTemplate: lower.includes("avatar") + ? "avatar" + : lower.includes("color") + ? "color" + : lower.includes("icon") + ? "icon" + : "default", + fixed: lower.includes("fixed"), + remote, + remoteUrl: remote ? "/api/teams" : "", + remoteQueryParam: "q", + remoteAutoLoad: true, + infinite: lower.includes("infinite"), + hasMore: lower.includes("infinite"), + }; +} + +const pinInputTitles = [ + "Default four-digit PIN", + "Different lengths", + "Pre-filled verification code", + "Masked security PIN", + "Alphanumeric regex", + "Grouped code with separator", + "Paste from clipboard", + "Disabled PIN input", + "Read-only code", + "Validation state", + "Supporting help text", + "Large PIN cells", + "Custom placeholder", + "Automatic form submission", + "Completion events", + "JavaScript methods", +]; + +const pinInputUses = pinInputTitles.map((title, index) => ({ + eyebrow: index < 7 ? "Entry behavior" : index < 13 ? "States & design" : "Automation", + title, + description: `Live ${title.toLowerCase()} example with keyboard navigation, filtering, and copyable component code.`, +})); + +function pinInputConfiguration(variation) { + const title = pinInputTitles[variation] ?? pinInputTitles[0]; + const lower = title.toLowerCase(); + const fourDigits = lower.includes("four-digit") || lower.includes("security pin"); + return { + label: title, + name: `pin-input-${variation + 1}`, + value: lower.includes("pre-filled") ? "482915" : lower.includes("read-only") ? "739204" : "", + length: fourDigits ? 4 : 6, + pattern: lower.includes("alphanumeric") ? "[A-Z0-9]" : "[0-9]", + inputMode: lower.includes("alphanumeric") ? "text" : "numeric", + placeholder: lower.includes("custom placeholder") ? "•" : "○", + masked: lower.includes("masked"), + disabled: lower.includes("disabled"), + readonly: lower.includes("read-only"), + required: lower.includes("validation"), + invalid: false, + validationMessage: "", + allowPaste: true, + separator: lower.includes("separator") ? "–" : "", + groupSize: lower.includes("separator") ? 3 : 0, + helpText: lower.includes("help text") + ? "Enter the code sent to your registered email address." + : "", + autoSubmit: lower.includes("automatic"), + size: lower.includes("large") ? "lg" : "default", + }; +} + +const strongPasswordTitles = [ + "Live strength meter", + "Requirements and hint text", + "Requirements in a popover", + "Custom special characters", + "Optional requirements", + "Disabled password strength", +]; + +const strongPasswordUses = strongPasswordTitles.map((title, index) => ({ + eyebrow: index < 3 ? "Strength feedback" : "Configuration", + title, + description: `Live ${title.toLowerCase()} example with accessible scoring feedback and copyable component code.`, +})); + +function strongPasswordConfiguration(variation) { + const title = strongPasswordTitles[variation] ?? strongPasswordTitles[0]; + const lower = title.toLowerCase(); + return { + label: title, + name: `strong-password-${variation + 1}`, + value: lower.includes("live") ? "Northstar!2026" : "", + placeholder: "Create a strong password", + autocomplete: "new-password", + minLength: 8, + specialCharactersSet: lower.includes("custom") ? "@#_-." : "!@#$%^&*()_+-=[]{}|;:,.<>?", + requireLowercase: true, + requireUppercase: true, + requireNumber: true, + requireSpecialCharacter: !lower.includes("optional"), + showRequirements: !lower.includes("live"), + presentation: lower.includes("popover") ? "popover" : "inline", + hintText: lower.includes("hint") + ? "Use a unique password you do not use for another account." + : "", + disabled: lower.includes("disabled"), + readonly: false, + required: false, + invalid: false, + validationMessage: "", + }; +} + +const togglePasswordTitles = [ + "Inline visibility button", + "Checkbox-controlled toggle", + "Synchronized password fields", + "Without visibility toggle", + "Supporting help text", + "Required validation", + "Disabled password", + "Read-only password", + "Large password field", + "Toggle events", +]; + +const togglePasswordUses = togglePasswordTitles.map((title, index) => ({ + eyebrow: index < 4 ? "Visibility" : index < 8 ? "Forms & states" : "Design & events", + title, + description: `Live ${title.toLowerCase()} example with accessible visibility controls and copyable component code.`, +})); + +function togglePasswordConfiguration(variation) { + const title = togglePasswordTitles[variation] ?? togglePasswordTitles[0]; + const lower = title.toLowerCase(); + const checkbox = lower.includes("checkbox"); + const synchronized = lower.includes("synchronized"); + return { + label: synchronized ? "Passwords" : lower.includes("inline") ? "Password" : title, + name: `toggle-password-${variation + 1}`, + value: + lower.includes("inline") || checkbox || lower.includes("read-only") ? "Northstar!2026" : "", + placeholder: "Enter your password", + autocomplete: "current-password", + minlength: lower.includes("validation") ? "8" : "", + maxlength: "128", + pattern: "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}", + fields: synchronized + ? [ + { + label: "New password", + name: "new-password", + placeholder: "Enter new password", + autocomplete: "new-password", + }, + { + label: "Current password", + name: "current-password", + value: "Northstar!2026", + autocomplete: "current-password", + }, + ] + : [], + visible: false, + toggleable: !lower.includes("without"), + toggleMode: checkbox ? "checkbox" : "button", + checkboxLabel: "Show password", + disabled: lower.includes("disabled"), + readonly: lower.includes("read-only"), + required: lower.includes("validation"), + helpText: lower.includes("help text") + ? "Use at least eight characters and avoid passwords used on other sites." + : "", + validationMessage: "", + invalid: false, + size: lower.includes("large") ? "lg" : "default", + }; +} + +const demoUses = (component) => + component.name === "Button" + ? buttonUses + : component.name === "AdvancedSelect" + ? advancedSelectUses + : component.name === "ComboBox" + ? comboboxUses + : component.name === "PinInput" + ? pinInputUses + : component.name === "StrongPassword" + ? strongPasswordUses + : component.name === "TogglePassword" + ? togglePasswordUses + : defaultUses; + +function eventDocumentation(component) { + if ( + !["AdvancedSelect", "ComboBox", "PinInput", "StrongPassword", "TogglePassword"].includes( + component.name, + ) + ) + return ""; + const selector = + component.name === "ComboBox" + ? "[data-wrn-combobox]" + : component.name === "PinInput" + ? "[data-wrn-pin-input]" + : component.name === "StrongPassword" + ? "[data-wrn-strong-password]" + : component.name === "TogglePassword" + ? "[data-wrn-toggle-password]" + : "[data-wrn-select]"; + const events = + component.name === "PinInput" + ? [ + ["input", "Fires after any PIN cell input is processed."], + ["change", "Fires when the combined PIN value changes."], + ["complete", "Fires when every PIN cell contains an accepted character."], + ["paste", "Fires after clipboard content is filtered and distributed."], + ["clear", "Fires after the complete PIN value is cleared."], + ["error", "Fires when component configuration, such as regex, is invalid."], + ] + : component.name === "StrongPassword" + ? [ + ["input", "Fires as the password value changes."], + ["change", "Fires when the password input commits a change."], + ["strength", "Fires with the current score, percentage, and strength level."], + ] + : component.name === "TogglePassword" + ? [ + ["input", "Fires whenever the password value receives user input."], + ["change", "Fires when the password field commits a changed value."], + ["toggle", "Fires after password visibility changes."], + ] + : [ + ["search", "Fires whenever the autocomplete query changes."], + ["select", "Fires after an option is selected by pointer or keyboard."], + ["change", "Fires when the selected value changes or is cleared."], + ["clear", "Fires after the current selection is cleared."], + ["open", "Fires when the suggestion dropdown opens."], + ["close", "Fires when the suggestion dropdown closes."], + ["load", "Fires after a remote request succeeds."], + ["error", "Fires when a remote request fails."], + ]; + const primaryEvent = + component.name === "PinInput" + ? "complete" + : component.name === "TogglePassword" + ? "toggle" + : "select"; + const secondaryEvent = + component.name === "PinInput" + ? "paste" + : component.name === "TogglePassword" + ? "input" + : "load"; + const listenerCode = `const component = document.querySelector("${selector}") + +component.addEventListener("${primaryEvent}", (event) => { + console.log(event.detail.value) + console.log(event.detail.complete) +}) + +component.addEventListener("${secondaryEvent}", (event) => { + console.log(event.detail) +})`; + return `
Component events

Respond to every interaction

Events are declared with @event, bubble from the component root, and expose their state through event.detail.

${events.map(([name, description]) => `
@${name}${description}
`).join("")}
Event listeners.js
${escapeCode(listenerCode)}
`; +} + +function detailPage(component, categoryComponents) { + const index = categoryComponents.findIndex((item) => item.name === component.name); + const previous = categoryComponents[index - 1]; + const next = categoryComponents[index + 1]; + const uses = demoUses(component); + const demos = uses + .map((useCase, variation) => { + const isPinLengthDemo = component.name === "PinInput" && variation === 1; + const pinLengths = [3, 5, 7]; + const mount = isPinLengthDemo + ? `
${pinLengths + .map((length) => + componentMount(component, variation, { + label: `${length}-digit code`, + name: `pin-length-${length}`, + length, + }), + ) + .join("")}
` + : componentMount(component, variation); + const snippet = isPinLengthDemo + ? pinLengths + .map((length) => + sourceSnippet(component, variation, { + label: `${length}-digit code`, + name: `pinLength${length}`, + length, + }), + ) + .join("\n\n") + : sourceSnippet(component, variation); + const validationSchema = + component.name === "AdvancedSelect" && variation === 25 + ? "advanced-select-validation" + : component.name === "AdvancedSelect" && variation === 26 + ? "advanced-select-dynamic-validation" + : component.name === "ComboBox" && variation === 14 + ? "combobox-validation" + : component.name === "PinInput" && variation === 9 + ? "pin-input-validation" + : component.name === "TogglePassword" && variation === 5 + ? "toggle-password-validation" + : ""; + const preview = validationSchema + ? `
${mount}
` + : mount; + return ` +
+
+
${useCase.eyebrow}

${useCase.title}

${useCase.description}

+ 0${variation + 1} +
+
+
+
Live preview
+
${preview}
+
+
+
Component usage.wrn
+ 
${snippet}
+
+
+
`; + }) + .join(""); + + return `// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ${component.name.replace(/[^A-Za-z0-9_]/g, "")}Detail { + layout = "showcase" +${playgroundStates(component)} + seo { + title = "${escapeAttribute(displayName(component.name))}" + description = "${escapeAttribute(component.purpose)}" + } + view { + +
+
+ ${titleCase(component.category)} component +

${escapeText(displayName(component.name))}

+

${escapeText(component.purpose)}

+
${component.props.length} props${component.slots.length} slots${component.events.length} eventsTheme readyResponsive
+
+
+
+ ${playgroundSection(component)} +
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

${demos}
+ ${eventDocumentation(component)} +
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

${propsTable(component)}
+
+ +
+ + } +} +`; +} + +function categoryPage(category, components) { + const liveDemoCount = components.reduce( + (total, component) => total + demoUses(component).length, + 0, + ); + const cards = components + .map( + (component) => ` +
+
+ +
${componentMount(component, 0)}
+
+
+
${titleCase(category)}

${escapeText(displayName(component.name))}

${escapeText(component.purpose)}

+
${component.props.length} props · ${component.slots.length} slotsExplore component
+
+
`, + ) + .join(""); + return `// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ${identifier(category)}Showcase { + layout = "showcase" + seo { + title = "${titleCase(category)} components" + description = "${components.length} ${category} components from @wrnexus/ui." + } + view { +
+ Component category +

${titleCase(category)}

+

${components.length} unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

+
${components.length} componentsMultiple use cases${liveDemoCount} live configurations
+
+
${cards}
+ } +} +`; +} + +const categories = Object.groupBy(reference.components, (component) => component.category); +const categoryEntries = Object.entries(categories).sort(([left], [right]) => + left.localeCompare(right), +); +const totalDemoCount = reference.components.reduce( + (total, component) => total + demoUses(component).length, + 0, +); + +function showcaseLayout() { + const directory = categoryEntries + .map( + ([category, components]) => ` +
+ ${titleCase(category)} +
${components + .map( + (component) => + `${escapeText(displayName(component.name))}`, + ) + .join("")}
+
`, + ) + .join(""); + + return `// Generated by scripts/generate-showcase.mjs. Do not edit directly. +layout Showcase { + view { +
+
+
+ + WRNexus UI + +
+
+ + +
+
+ +
+ +
+
+
+ } +} +`; +} + +function documentLayout() { + return `// Generated by scripts/generate-showcase.mjs. Do not edit directly. +layout Document { + props { + cookies = {} + theme = "light" + language = "en" + url = "" + pathname = "/" + } + view { + + +
+ + } +} +`; +} + +mkdirSync(pagesDir, { recursive: true }); +mkdirSync(detailPagesDir, { recursive: true }); +mkdirSync(layoutsDir, { recursive: true }); +writeFileSync(join(layoutsDir, "showcase.wrn"), showcaseLayout(), "utf8"); +writeFileSync(join(layoutsDir, "document.wrn"), documentLayout(), "utf8"); +for (const file of readdirSync(pagesDir).filter((entry) => entry.endsWith(".wrn"))) { + unlinkSync(join(pagesDir, file)); +} +for (const file of readdirSync(detailPagesDir).filter((entry) => entry.endsWith(".wrn"))) { + unlinkSync(join(detailPagesDir, file)); +} + +for (const [category, components] of categoryEntries) { + writeFileSync(join(pagesDir, `${category}.wrn`), categoryPage(category, components), "utf8"); + for (const component of components) { + writeFileSync( + join(detailPagesDir, `${slugOf(component.name)}.wrn`), + detailPage(component, components), + "utf8", + ); + } +} + +const categoryCards = categoryEntries + .map( + ([category, components], index) => + `0${index + 1}
${titleCase(category)}

${components.length} components · ${components.reduce((total, component) => total + demoUses(component).length, 0)} live demos

`, + ) + .join(""); + +writeFileSync( + join(pagesDir, "index.wrn"), + `// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page ComponentShowcase { + layout = "showcase" + seo { + title = "WRNexus component system" + description = "Explore every unique @wrnexus/ui component through live, production-quality examples." + } + view { +
+
+ The UI foundation for WRNexus +

Build modern products
at framework speed.

+

A complete, accessible component system with ${reference.count} primitives, ready-made blocks, page templates, responsive behavior, and deeply configurable design tokens.

+
Get started Explore blocks
+
$bun add @wrnexus/ui
+
+
+
+
${reference.count}Unique components
+
${totalDemoCount}Live configurations
+
0Duplicate implementations
+
${categoryEntries.length}Focused categories
+
+
Explore the system

Everything your product needs

${categoryCards}
+
+ } +} +`, + "utf8", +); + +const docsSections = [ + [ + "installation", + "Installation", + "Install the package and import the shared stylesheet once in your application.", + "bun add @wrnexus/ui", + ], + [ + "framework-guides", + "Framework guides", + "WRNexus components use native HTML semantics and framework component mounts.", + ], + [ + "accessibility", + "Accessibility", + "Keyboard interaction, visible focus states, labels, and reduced-motion support ship by default.", + ], + [ + "dark-mode", + "Dark mode", + "Choose light, dark, or system mode. The selection persists and updates every preview.", + ], + [ + "themes", + "Themes", + "Theme presets control radius, surface treatment, borders, shadows, and motion.", + ], + [ + "colors", + "Colors", + "Semantic primary, secondary, success, warning, danger, and info tokens remain available in every palette.", + ], + [ + "fonts", + "Fonts", + "Select a font family globally while components continue to inherit typography correctly.", + ], + [ + "sizing", + "Sizing", + "Compact through large scales adjust the complete component system consistently.", + ], + [ + "resources", + "Resources", + "Use the component API pages, blocks, and templates as production starting points.", + ], +]; +writeFileSync( + join(pagesDir, "docs.wrn"), + `page Documentation { + layout = "showcase" + seo { title = "Documentation" description = "Install, configure, and use WRNexus UI." } + view { +
+
Getting started

Build with WRNexus UI

Configure one design system and use it across components, blocks, and complete page templates.

+

Explore the documentation

Every Getting Started and Customization topic now has its own page. Choose a guide from the sidebar to continue.

+
+ } +} +`, + "utf8", +); + +const customizationGuides = new Set(["dark-mode", "themes", "colors", "fonts", "sizing"]); +for (const [slug, title, description, code] of docsSections) { + const section = customizationGuides.has(slug) ? "Customization" : "Getting Started"; + const examples = + slug === "colors" + ? [ + ["Brand colors", "Primary and secondary tokens communicate brand hierarchy."], + [ + "Status colors", + "Success, warning, danger, and info preserve their semantic meaning in every palette.", + ], + [ + "Component override", + 'Pass color="success" or another semantic color to any component.', + ], + ] + : slug === "sizing" + ? [ + ["Component size", "Every component accepts xs, sm, default, md, lg, and xl."], + [ + "Global density", + "Compact, default, comfortable, and large scale the complete interface.", + ], + ["Responsive sizing", "Component sizing cooperates with responsive breakpoints."], + ] + : slug === "themes" + ? [ + ["Default", "Balanced surfaces, borders, elevation, and radius."], + ["Soft and sharp", "Choose friendly rounded surfaces or dense operational styling."], + ["Glass", "Use translucent layered surfaces while retaining semantic tokens."], + ] + : [ + ["Overview", description], + ["Configuration", "Use the design switcher in the header to test this setting live."], + [ + "Component behavior", + "The setting is inherited by components, blocks, templates, and playground previews.", + ], + ]; + writeFileSync( + join(pagesDir, `${slug}.wrn`), + `page ${identifier(slug)}Guide { + layout = "showcase" + seo { + title = "${escapeAttribute(title)}" + description = "${escapeAttribute(description)}" + } + view { +
+ +
${section}

${escapeText(title)}

${escapeText(description)}

+ ${examples.map(([heading, copy]) => `

${escapeText(heading)}

${escapeText(copy)}

`).join("")} + ${code ? `

Quick start

${escapeCode(code)}
` : ""} + +
+ } +} +`, + "utf8", + ); +} + +const blockCards = [ + [ + "Hero sections", + "Marketing", + "layout-template", + "Hero, actions, product proof, and visual stage.", + ], + [ + "Feature grids", + "Marketing", + "grid-2x2", + "Responsive benefits and product capability sections.", + ], + ["Pricing sections", "Marketing", "badge-dollar-sign", "Tier cards, comparison grids, and CTAs."], + [ + "Application shells", + "Application UI", + "panel-left", + "Headers, sidebars, content, and command areas.", + ], + [ + "Dashboard stats", + "Application UI", + "chart-no-axes-combined", + "Metrics, trends, filters, and summaries.", + ], + ["Checkout panels", "Ecommerce", "shopping-cart", "Cart, address, payment, and order summary."], + [ + "Article layouts", + "Blog & Articles", + "newspaper", + "Editorial headers, content, author, and sharing.", + ], + [ + "Authentication", + "Application UI", + "shield-check", + "Sign in, registration, recovery, and verification.", + ], +]; +writeFileSync( + join(pagesDir, "blocks.wrn"), + `page Blocks { + layout = "showcase" + seo { title = "UI blocks" description = "Complete sections composed from WRNexus UI components." } + view { +
+ +
Composable sections

Ready-to-use UI blocks

Complete responsive sections composed exclusively from the components in this library.

+
${blockCards.map(([title, category, icon, description], index) => ``).join("")}
+
+ } +} +`, + "utf8", +); + +const templates = [ + [ + "Admin dashboard", + "Dashboard & Admin", + "31 pages", + "Analytics, teams, settings, billing, and operational workflows.", + ], + [ + "Commerce storefront", + "Ecommerce", + "18 pages", + "Catalog, product, cart, checkout, and customer account pages.", + ], + [ + "SaaS website", + "Websites", + "12 pages", + "Landing, pricing, about, blog, contact, and legal pages.", + ], + [ + "Support center", + "Support", + "9 pages", + "Knowledge base, ticketing, status, and customer help experiences.", + ], + [ + "Finance workspace", + "Finance & Payments", + "14 pages", + "Accounts, transactions, reporting, transfers, and controls.", + ], +]; +writeFileSync( + join(pagesDir, "templates.wrn"), + `page Templates { + layout = "showcase" + seo { title = "Page templates" description = "Complete pages assembled from WRNexus UI blocks." } + view { +
+ +
Complete products

Production-ready templates

Responsive page systems assembled from WRNexus blocks and components.

+
${templates.map(([title, category, count], index) => `
${count}

${title}

${category} template with consistent navigation, content, forms, and responsive behavior.

Preview →
`).join("")}
+
+ } +} +`, + "utf8", +); + +process.stdout.write( + `Generated ${reference.count} component detail pages, ${totalDemoCount} live demos, and ${categoryEntries.length} category pages.\n`, +); diff --git a/test/showcase.test.ts b/test/showcase.test.ts new file mode 100644 index 0000000..aff74e8 --- /dev/null +++ b/test/showcase.test.ts @@ -0,0 +1,231 @@ +import { expect, test } from "bun:test"; +import { readFileSync, readdirSync } from "node:fs"; +import { join } from "node:path"; +import { compileWireFile } from "../../../packages/compiler/src/index.ts"; + +const root = join(import.meta.dir, ".."); +const pagesDir = join(root, "app", "pages"); +const detailPagesDir = join(pagesDir, "components"); +const reference = JSON.parse( + readFileSync(join(root, "..", "..", "packages", "ui", "component-reference.json"), "utf8"), +) as { + count: number; + components: Array<{ mount: string; category: string }>; +}; + +test("showcase configures local Lucide icon generation", () => { + const packageJson = JSON.parse(readFileSync(join(root, "package.json"), "utf8")) as { + devDependencies: Record; + }; + const styles = readFileSync(join(root, "app", "styles", "global.css"), "utf8"); + + expect(packageJson.devDependencies["@iconify/tailwind4"]).toBeTruthy(); + expect(packageJson.devDependencies["@iconify-json/lucide"]).toBeTruthy(); + expect(styles).toContain('@plugin "@iconify/tailwind4";'); + expect(styles).toContain(".playground-preview-source > .wire-action:not(.w-full)"); + expect(styles).toContain("width: fit-content;"); +}); + +test("showcase uses a searchable three-column documentation shell", () => { + const layout = readFileSync(join(root, "app", "layouts", "showcase.wrn"), "utf8"); + const styles = readFileSync(join(root, "app", "styles", "global.css"), "utf8"); + const runtime = readFileSync(join(root, "public", "playground.js"), "utf8"); + + expect(layout).toContain("data-docs-directory"); + expect(layout).toContain("data-docs-search"); + expect(layout.match(/data-docs-component-link/g)).toHaveLength(reference.count); + expect(styles).toContain("grid-template-columns: 17rem minmax(0, 1fr)"); + expect(runtime).toContain("data-docs-menu-toggle"); + expect(runtime).toContain('event.key.toLowerCase() === "k"'); +}); + +test("showcase SSR document layout maps persisted design cookies to html attributes", () => { + const source = readFileSync(join(root, "app", "layouts", "document.wrn"), "utf8"); + expect(source).toContain(""); + expect(source).toContain('
'); + for (const setting of ["style", "palette", "mode", "font", "scale"]) { + expect(source).toContain(`data-ui-${setting}`); + expect(source).toContain(`cookies['wrn-ui-${setting}']`); + } +}); + +test("advanced select demos use validation schemas and a real remote API", () => { + const page = readFileSync( + join(root, "app", "pages", "components", "advanced-select.wrn"), + "utf8", + ); + expect(page).toContain('data-schema="advanced-select-validation"'); + expect(page).toContain('data-schema="advanced-select-dynamic-validation"'); + expect(readFileSync(join(root, "app", "api", "teams.ts"), "utf8")).toContain("export const GET"); +}); + +test("category pages preview every UI component exactly once", () => { + const categoryPages = readdirSync(pagesDir) + .filter((file) => file !== "index.wrn" && file.endsWith(".wrn")) + .map((file) => readFileSync(join(pagesDir, file), "utf8")) + .join("\n"); + + const mounts = [...categoryPages.matchAll(/
match[1], + ); + + expect(mounts).toHaveLength(reference.count); + expect(new Set(mounts).size).toBe(reference.count); + expect(mounts.sort()).toEqual(reference.components.map((component) => component.mount).sort()); +}); + +test("every component has a detail page with its expected live use cases", () => { + const files = readdirSync(detailPagesDir).filter((entry) => entry.endsWith(".wrn")); + + expect(files).toHaveLength(reference.count); + + const detailMounts = files.flatMap((file) => { + const source = readFileSync(join(detailPagesDir, file), "utf8"); + return [...source.matchAll(/
match[1]); + }); + + // Every detail page has one playground plus three standard demos. Button, + // AdvancedSelect, ComboBox, PinInput, and TogglePassword add specialized capability demos. + expect(detailMounts).toHaveLength(reference.count * 4 + 83); + for (const component of reference.components) { + const expectedMounts = + component.mount === "Button" + ? 9 + : component.mount === "AdvancedSelect" + ? 42 + : component.mount === "ComboBox" + ? 22 + : component.mount === "PinInput" + ? 19 + : component.mount === "TogglePassword" + ? 11 + : 4; + expect(detailMounts.filter((mount) => mount === component.mount)).toHaveLength(expectedMounts); + } +}, 15_000); + +test("every detail page has a type-aware realtime playground", () => { + const files = readdirSync(detailPagesDir).filter((entry) => entry.endsWith(".wrn")); + for (const file of files) { + const source = readFileSync(join(detailPagesDir, file), "utf8"); + expect(source).toContain("data-playground-preview"); + expect(source).toContain("data-playground-form"); + expect(source).toContain("data-playground-code"); + expect(source).toContain("data-playground-copy"); + expect(source).toContain('href="#playground"'); + } + + const runtime = readFileSync(join(root, "public", "playground.js"), "utf8"); + expect(runtime).toContain("fetch(url"); + expect(runtime).toContain("HTMLSelectElement"); + expect(runtime).toContain("navigator.clipboard.writeText"); + expect(runtime).toContain("updateCode(playground)"); + expect(runtime).toContain("__wrnexusHydrateScopes"); + expect(runtime).toContain("data-playground-json"); + expect(runtime).toContain('createPolicy("wrnexus-playground"'); + expect(runtime).toContain("preview.replaceChildren"); + expect(runtime).not.toContain("preview.innerHTML"); +}); + +test("detail pages show component syntax beside each live preview", () => { + const buttonPage = readFileSync(join(detailPagesDir, "button.wrn"), "utf8"); + + expect(buttonPage).toContain('name="pg_label" type="text"'); + expect(buttonPage).toContain('name="pg_variant"'); + expect(buttonPage).toContain(''); + expect(buttonPage).not.toContain(''); + expect(buttonPage).toContain('name="pg_color"'); + expect(buttonPage).toContain(''); + expect(buttonPage).toContain('name="pg_size"'); + expect(buttonPage).toContain(''); + expect(buttonPage.match(/class="demo-workbench"/g)).toHaveLength(8); + expect(buttonPage.match(/<Button/g)).toHaveLength(9); + expect(buttonPage).not.toContain("<div data-component="Button""); + expect(buttonPage).not.toContain('
'); +}); + +test("advanced select and combobox document their complete event contract", () => { + for (const slug of ["advanced-select", "combo-box"]) { + const source = readFileSync(join(detailPagesDir, `${slug}.wrn`), "utf8"); + for (const event of ["search", "select", "change", "clear", "open", "close", "load", "error"]) { + expect(source).toContain(`@${event}`); + } + expect(source).toContain('id="events"'); + expect(source).toContain("event.detail"); + } +}); + +test("pin input documents verification events", () => { + const source = readFileSync(join(detailPagesDir, "pin-input.wrn"), "utf8"); + for (const event of ["input", "change", "complete", "paste", "clear", "error"]) { + expect(source).toContain(`@${event}`); + } + expect(source).toContain('id="events"'); + expect(source).toContain("event.detail"); + expect(source).toContain("Different lengths"); + expect(source).toContain('length="3"'); + expect(source).toContain('length="5"'); + expect(source).toContain('length="7"'); +}); + +test("toggle password documents visibility states, validation, and declared events", () => { + const source = readFileSync(join(detailPagesDir, "toggle-password.wrn"), "utf8"); + for (const event of ["input", "change", "toggle"]) { + expect(source).toContain(`@${event}`); + } + expect(source).toContain("Checkbox-controlled toggle"); + expect(source).toContain("Synchronized password fields"); + expect(source).toContain("Without visibility toggle"); + expect(source).toContain("fields='[\n {"); + expect(source).toContain('"label": "New password"'); + expect(source).toContain('"name": "current-password"'); + expect(source).not.toContain("fields='[..]'"); + expect(source).toContain('data-schema="toggle-password-validation"'); +}); + +test("strong password documents live scoring, requirements, popover, and custom characters", () => { + const source = readFileSync(join(detailPagesDir, "strong-password.wrn"), "utf8"); + expect(source).toContain("Live strength meter"); + expect(source).toContain("Requirements and hint text"); + expect(source).toContain("Requirements in a popover"); + expect(source).toContain("Custom special characters"); + expect(source).toContain('presentation="popover"'); + expect(source).toContain('specialCharactersSet="@#_-."'); + for (const event of ["input", "change", "strength"]) { + expect(source).toContain(`@${event}`); + } +}); + +test("complex component props are shown as complete readable multiline values", () => { + for (const slug of ["advanced-select", "combo-box", "select", "toggle-password"]) { + const source = readFileSync(join(detailPagesDir, `${slug}.wrn`), "utf8"); + expect(source).not.toMatch(/\b(?:options|groups|items|fields)='\[\.\.\.\]'/); + } + + const advancedSelect = readFileSync(join(detailPagesDir, "advanced-select.wrn"), "utf8"); + expect(advancedSelect).toContain("options='[\n {"); + expect(advancedSelect).toContain('"value": "design"'); +}); + +test("code examples preserve literal object braces after client hydration", () => { + const source = readFileSync(join(detailPagesDir, "toggle-password.wrn"), "utf8"); + expect(source).toContain("{"); + expect(source).toContain("}"); + expect(source).not.toContain('fields=\'[\n {\n "label"'); +}); + +test("every generated showcase page compiles", () => { + const paths = [ + ...readdirSync(pagesDir) + .filter((entry) => entry.endsWith(".wrn")) + .map((entry) => join(pagesDir, entry)), + ...readdirSync(detailPagesDir) + .filter((entry) => entry.endsWith(".wrn")) + .map((entry) => join(detailPagesDir, entry)), + ]; + + for (const path of paths) { + expect(() => compileWireFile(readFileSync(path, "utf8"), path)).not.toThrow(); + } +}); diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..2b53376 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "noEmit": true + }, + "include": ["wrnexus.config.ts", "test/**/*.ts"] +} diff --git a/wrnexus.config.ts b/wrnexus.config.ts new file mode 100644 index 0000000..7ecc5d7 --- /dev/null +++ b/wrnexus.config.ts @@ -0,0 +1,30 @@ +import type { AppConfig } from "@wrnexus/styles"; + +const config: AppConfig = { + head: [''], + seo: { + title: "WRNexus UI Component Showcase", + titleTemplate: "%s | UI Showcase", + description: "A generated, exhaustive showcase of every component in @wrnexus/ui.", + robots: "noindex,nofollow", + themeColor: "#7c3aed", + }, + theme: { + palette: "violet", + default: "light", + }, + fonts: { + sans: '"Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif', + google: [{ family: "Plus Jakarta Sans", weights: [400, 500, 600, 700, 800] }], + }, + styles: { + entry: "app/styles/global.css", + process: async ({ entryPath, appRoot, mode }) => { + const args = ["@tailwindcss/cli", "-i", entryPath!]; + if (mode === "production") args.push("--minify"); + return await Bun.$.cwd(appRoot)`bunx ${args}`.text(); + }, + }, +}; + +export default config;