feat: deployable design studio and updated component showcase
This commit is contained in:
Clintchiz committed
1 parent
3dddcaac1a
commit
3987ddbcfe
113 files changed
+4544
-1039
No files matched your search
@@ -69,3 +69,38 @@ bun run --cwd examples/component-showcase check
|
||||
|
||||
Review representative component pages at mobile, tablet, and desktop widths and
|
||||
in light, dark, keyboard-only, and reduced-motion modes before publishing.
|
||||
|
||||
## Design Studio on the deployed site
|
||||
|
||||
The navigation opens `/design-studio/`. It includes guided alternatives, decision
|
||||
locks, natural-language edits, component recipes, previews and portable exports.
|
||||
Drafts and incomplete source edits remain in each browser's local storage; use
|
||||
Export raw draft before clearing browser data or changing the site's origin.
|
||||
The hosted demo uses local rule generation, needs no AI credentials, and cannot
|
||||
apply designs to server files or access agent workspaces.
|
||||
|
||||
On the VM, pull this repository and use Bun 1.3 or newer:
|
||||
|
||||
```sh
|
||||
git pull --ff-only
|
||||
bun install --frozen-lockfile
|
||||
bun run check
|
||||
PORT=3000 bun run start
|
||||
```
|
||||
|
||||
`start` runs the production component site and an export-only Studio sidecar
|
||||
bound to loopback port 4320. Include `deploy/nginx-design-studio.conf` inside your
|
||||
existing nginx server block, retain its existing component-site proxy, validate
|
||||
with `nginx -t`, then reload nginx. The proxy must preserve `/design-studio/` and
|
||||
Host, and pass Origin unchanged. If port 4320 is occupied, set DESIGN_STUDIO_PORT
|
||||
and update the proxy upstream to the same port. Manage the `bun run start`
|
||||
process using your existing service manager and restart it after each build.
|
||||
|
||||
The private `@wrnexus` registry is configured in `.npmrc`. Supply registry
|
||||
credentials on the VM through its user configuration or secret store; no tokens
|
||||
are committed. Dependencies are pinned and bun.lock is the deployment lock.
|
||||
A refreshed package-lock.json is retained for npm tooling, but Bun runs the app.
|
||||
|
||||
After deployment, check `/`, a component playground and `/design-studio/`.
|
||||
Create a draft, generate alternatives, open a preview, export JSON, then reload
|
||||
and confirm draft recovery. Existing Studio drafts on other origins remain there.
|
||||
@@ -9,7 +9,7 @@ layout Showcase {
|
||||
<label class="docs-search"><span class="icon-[lucide--search] size-4" aria-hidden="true"></span><input type="search" placeholder="Search documentation..." data-docs-search /><kbd>⌘ K</kbd></label>
|
||||
</div>
|
||||
<div class="showcase-header-end">
|
||||
<nav aria-label="Primary navigation" class="showcase-nav"><a href="/preview">Examples</a><a href="/docs">Docs</a><a href="/block-library">Blocks</a><a href="/templates">Templates</a></nav>
|
||||
<nav aria-label="Primary navigation" class="showcase-nav"><a href="/preview">Examples</a><a href="/docs">Docs</a><a href="/block-library">Blocks</a><a href="/templates">Templates</a><a href="/design-studio/" data-no-nav>Design Studio</a></nav>
|
||||
<button type="button" class="showcase-theme" data-design-panel-toggle aria-label="Customize design"><span class="icon-[lucide--palette] size-5" aria-hidden="true"></span></button>
|
||||
</div>
|
||||
</header>
|
||||
@@ -27,14 +27,14 @@ layout Showcase {
|
||||
<nav aria-label="Documentation directory">
|
||||
<section class="docs-directory-group docs-directory-guides"><strong>Getting Started</strong><div><a href="/docs">Introduction</a><a href="/installation">Installation</a><a href="/framework-guides">Framework guides</a><a href="/accessibility">Accessibility</a><a href="/resources">Resources</a></div></section>
|
||||
<section class="docs-directory-group docs-directory-guides"><strong>Customization</strong><div><a href="/dark-mode">Dark Mode</a><a href="/themes">Themes <small>New</small></a><a href="/colors">Colors <small>New</small></a><a href="/fonts">Fonts</a><a href="/sizing">Sizing</a></div></section>
|
||||
|
||||
|
||||
<section class="docs-directory-group">
|
||||
<a class="docs-directory-heading" href="/base">Base</a>
|
||||
<div><a data-docs-component-link href="/components/accordion">Accordion</a><a data-docs-component-link href="/components/alert">Alert</a><a data-docs-component-link href="/components/avatar">Avatar</a><a data-docs-component-link href="/components/avatar-group">Avatar Group</a><a data-docs-component-link href="/components/badge">Badge</a><a data-docs-component-link href="/components/blockquote">Blockquote</a><a data-docs-component-link href="/components/button">Button</a><a data-docs-component-link href="/components/button-group">Button Group</a><a data-docs-component-link href="/components/card">Card</a><a data-docs-component-link href="/components/carousel">Carousel</a><a data-docs-component-link href="/components/chat-bubble">Chat Bubble</a><a data-docs-component-link href="/components/collapse">Collapse</a><a data-docs-component-link href="/components/date-picker">Date Picker</a><a data-docs-component-link href="/components/device-frame">Device Frame</a><a data-docs-component-link href="/components/file-upload-progress">File Upload Progress</a><a data-docs-component-link href="/components/legend-indicator">Legend Indicator</a><a data-docs-component-link href="/components/list">List</a><a data-docs-component-link href="/components/list-group">List Group</a><a data-docs-component-link href="/components/marquee">Marquee</a><a data-docs-component-link href="/components/progress">Progress</a><a data-docs-component-link href="/components/rating">Rating</a><a data-docs-component-link href="/components/skeleton">Skeleton</a><a data-docs-component-link href="/components/spinner">Spinner</a><a data-docs-component-link href="/components/styled-icon">Styled Icon</a><a data-docs-component-link href="/components/timeline">Timeline</a><a data-docs-component-link href="/components/tree-view">Tree View</a></div>
|
||||
</section>
|
||||
<section class="docs-directory-group">
|
||||
<a class="docs-directory-heading" href="/core">Core</a>
|
||||
<div><a data-docs-component-link href="/components/preference-switcher">Preference Switcher</a><a data-docs-component-link href="/components/toaster">Toaster</a></div>
|
||||
<div><a data-docs-component-link href="/components/drawflow-canvas">Drawflow Canvas</a><a data-docs-component-link href="/components/flow-canvas">Flow Canvas</a><a data-docs-component-link href="/components/preference-switcher">Preference Switcher</a><a data-docs-component-link href="/components/toaster">Toaster</a></div>
|
||||
</section>
|
||||
<section class="docs-directory-group">
|
||||
<a class="docs-directory-heading" href="/data">Data</a>
|
||||
|
||||
@@ -11,7 +11,7 @@ page AccessibilityGuide {
|
||||
<section class="guide-section"><h2>Overview</h2><p>Keyboard interaction, visible focus states, labels, and reduced-motion support ship by default.</p></section><section class="guide-section"><h2>Configuration</h2><p>Use the design switcher in the header to test this setting live.</p></section><section class="guide-section"><h2>Component behavior</h2><p>The setting is inherited by components, blocks, templates, and playground previews.</p></section>
|
||||
<section class="guide-section"><h2>Label controls and explain errors</h2><p>Give every control a visible label. Use helperText for instructions and error for actionable feedback. Test Tab, Shift+Tab, Enter and Escape; focus must remain visible and follow the reading order.</p><pre><code><Input label="Email address" type="email" name="email" required="true" helperText="Use your work email." error="Enter a valid email address." />
|
||||
<Button label="Save changes" disabled="true" /></code></pre><h3>Verify the result</h3><p>Open the matching component page, change its options, and try the keyboard controls. Copy the demonstrated configuration into your page, then replace sample content with your data.</p></section>
|
||||
|
||||
|
||||
<nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav>
|
||||
</article>
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@ page ColorsGuide {
|
||||
<section class="guide-section"><h2>Choose color by meaning</h2><p>Use primary for the main action, danger for destructive actions and success for completion. Always include text or an icon so color is not the only signal.</p><pre><code><Button label="Save" color="primary" />
|
||||
<Button label="Delete record" color="danger" />
|
||||
<Badge label="Active" color="success" /></code></pre><h3>Verify the result</h3><p>Open the matching component page, change its options, and try the keyboard controls. Copy the demonstrated configuration into your page, then replace sample content with your data.</p></section>
|
||||
|
||||
|
||||
<nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav>
|
||||
</article>
|
||||
}
|
||||
|
||||
@@ -112,7 +112,7 @@ page AccordionDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="accordion-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Accordion size="default" variant="default" class="showcase-instance showcase-instance--1" items='[{"value":"workspace","label":"How do I create a workspace?","content":"Choose Create workspace, add a name, and invite your team. You can update the details any time in Settings."},{"value":"billing","label":"Can I change my plan later?","content":"Yes. Open Billing to compare plans and choose the one that suits your team."},{"value":"security","label":"How is my account protected?","content":"Enable two-step verification and add a recovery method to keep your account secure."}]' defaultOpen='["workspace"]' multiple="false" alwaysOpen="false" disabled="false" indicator="chevron" indicatorPosition="end" showIndicator="true" bordered="false" separated="false" flush="false" contentItalic="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Plain disclosure rows usage">
|
||||
@@ -158,7 +158,7 @@ page AccordionDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="accordion-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Accordion size="sm" variant="secondary" class="showcase-instance showcase-instance--2" items='[{"value":"workspace","label":"How do I create a workspace?","content":"Choose Create workspace, add a name, and invite your team. You can update the details any time in Settings."},{"value":"billing","label":"Can I change my plan later?","content":"Yes. Open Billing to compare plans and choose the one that suits your team."},{"value":"security","label":"How is my account protected?","content":"Enable two-step verification and add a recovery method to keep your account secure."}]' defaultOpen='["workspace"]' multiple="false" alwaysOpen="false" disabled="false" indicator="plus" indicatorPosition="start" showIndicator="true" bordered="true" separated="false" flush="false" contentItalic="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Bordered group usage">
|
||||
@@ -205,7 +205,7 @@ page AccordionDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="accordion-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Accordion size="lg" variant="success" class="showcase-instance showcase-instance--3" items='[{"value":"workspace","label":"How do I create a workspace?","content":"Choose Create workspace, add a name, and invite your team. You can update the details any time in Settings."},{"value":"billing","label":"Can I change my plan later?","content":"Yes. Open Billing to compare plans and choose the one that suits your team."},{"value":"security","label":"How is my account protected?","content":"Enable two-step verification and add a recovery method to keep your account secure."}]' defaultOpen='["workspace"]' multiple="true" alwaysOpen="false" disabled="false" indicator="chevron" indicatorPosition="end" showIndicator="true" bordered="true" separated="true" flush="false" contentItalic="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Separate panels usage">
|
||||
|
||||
@@ -177,7 +177,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Default advanced select usage">
|
||||
@@ -241,7 +241,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"}]},{"label":"Business","options":[{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]}]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Grouped options usage">
|
||||
@@ -316,7 +316,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="true" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Fixed-position dropdown usage">
|
||||
@@ -382,7 +382,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Placeholder with icon" name="advanced-select-4" value="" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a workspace" placeholderIcon="icon-[lucide--building-2]" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Placeholder with icon usage">
|
||||
@@ -448,7 +448,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="true" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Allow empty selection usage">
|
||||
@@ -512,7 +512,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Multiple selection" name="advanced-select-6" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Multiple selection usage">
|
||||
@@ -580,7 +580,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Multiple selection with optgroups" name="advanced-select-7" value="" values='["design","engineering"]' options='[]' groups='[{"label":"Product","options":[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"}]},{"label":"Business","options":[{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]}]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Multiple selection with optgroups usage">
|
||||
@@ -658,7 +658,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Multiple selection with option templates" name="advanced-select-8" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Multiple selection with option templates usage">
|
||||
@@ -727,7 +727,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Multiple selection with counter" name="advanced-select-9" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="true" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Multiple selection with counter usage">
|
||||
@@ -796,7 +796,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-10" class="demo-canvas demo-canvas--10">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Multiple selection with conditional counter" name="advanced-select-10" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="3" showCounter="true" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Multiple selection with conditional counter usage">
|
||||
@@ -866,7 +866,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-11" class="demo-canvas demo-canvas--11">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="true" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Counter with option templates usage">
|
||||
@@ -933,7 +933,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-12" class="demo-canvas demo-canvas--12">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Searchable dropdown usage">
|
||||
@@ -997,7 +997,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-13" class="demo-canvas demo-canvas--13">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="3" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Minimum search length usage">
|
||||
@@ -1062,7 +1062,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-14" class="demo-canvas demo-canvas--14">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="3" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Search result limit usage">
|
||||
@@ -1127,7 +1127,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-15" class="demo-canvas demo-canvas--15">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Scroll to selected option usage">
|
||||
@@ -1192,7 +1192,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-16" class="demo-canvas demo-canvas--16">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="startsWith" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Search match mode usage">
|
||||
@@ -1257,7 +1257,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-17" class="demo-canvas demo-canvas--17">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Search labels and descriptions usage">
|
||||
@@ -1321,7 +1321,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-18" class="demo-canvas demo-canvas--18">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="true" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Tag-style selection usage">
|
||||
@@ -1387,7 +1387,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-19" class="demo-canvas demo-canvas--19">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="true" disabled="true" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled tag selection usage">
|
||||
@@ -1454,7 +1454,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-20" class="demo-canvas demo-canvas--20">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Option template with icons usage">
|
||||
@@ -1520,7 +1520,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-21" class="demo-canvas demo-canvas--21">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="avatar" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Option template with avatars usage">
|
||||
@@ -1586,7 +1586,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-22" class="demo-canvas demo-canvas--22">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="color" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Option template with color indicators usage">
|
||||
@@ -1652,7 +1652,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-23" class="demo-canvas demo-canvas--23">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Advanced select sizes usage">
|
||||
@@ -1718,7 +1718,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-24" class="demo-canvas demo-canvas--24">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="true" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled advanced select usage">
|
||||
@@ -1784,7 +1784,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-25" class="demo-canvas demo-canvas--25">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Inside a modal usage">
|
||||
@@ -1849,7 +1849,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-26" class="demo-canvas demo-canvas--26">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><form data-schema="advanced-select-validation" class="demo-validation-form"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="true" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /><button type="submit" class="wrn-btn wrn-btn--variant-default">Validate selection</button></form></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Validation states usage">
|
||||
@@ -1915,7 +1915,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-27" class="demo-canvas demo-canvas--27">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><form data-schema="advanced-select-dynamic-validation" class="demo-validation-form"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="true" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /><button type="submit" class="wrn-btn wrn-btn--variant-default">Validate selection</button></form></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Dynamic validation styling usage">
|
||||
@@ -1981,7 +1981,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-28" class="demo-canvas demo-canvas--28">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Add or remove options usage">
|
||||
@@ -2046,7 +2046,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-29" class="demo-canvas demo-canvas--29">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Add or remove options in multiple mode" name="advanced-select-29" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Add or remove options in multiple mode usage">
|
||||
@@ -2114,7 +2114,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-30" class="demo-canvas demo-canvas--30">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Set a single value programmatically usage">
|
||||
@@ -2179,7 +2179,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-31" class="demo-canvas demo-canvas--31">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Set multiple values programmatically" name="advanced-select-31" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Set multiple values programmatically usage">
|
||||
@@ -2247,7 +2247,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-32" class="demo-canvas demo-canvas--32">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote data source usage">
|
||||
@@ -2314,7 +2314,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-33" class="demo-canvas demo-canvas--33">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Remote data source (multiple)" name="advanced-select-33" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote data source (multiple) usage">
|
||||
@@ -2384,7 +2384,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-34" class="demo-canvas demo-canvas--34">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Remote data tags" name="advanced-select-34" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="true" allowEmpty="false" tags="true" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote data tags usage">
|
||||
@@ -2455,7 +2455,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-35" class="demo-canvas demo-canvas--35">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Option templates with remote data usage">
|
||||
@@ -2523,7 +2523,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-36" class="demo-canvas demo-canvas--36">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="3" showCounter="true" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Conditional counter with remote data usage">
|
||||
@@ -2592,7 +2592,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-37" class="demo-canvas demo-canvas--37">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="avatar" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Avatar template with remote data usage">
|
||||
@@ -2660,7 +2660,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-38" class="demo-canvas demo-canvas--38">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Preselected values usage">
|
||||
@@ -2725,7 +2725,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-39" class="demo-canvas demo-canvas--39">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="true" hasMore="true" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Infinite scroll usage">
|
||||
@@ -2793,7 +2793,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-40" class="demo-canvas demo-canvas--40">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="true" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Inside overflow-hidden containers usage">
|
||||
@@ -2859,7 +2859,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-41" class="demo-canvas demo-canvas--41">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" 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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Destroy and reinitialize usage">
|
||||
|
||||
@@ -85,7 +85,7 @@ page AlertDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="alert-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Alert size="default" color="success" variant="soft" class="" radius="md" shadow="none" title="Changes saved" description="Your workspace settings are up to date." items='[]' actions='[]' showIcon="true" icon="icon-[lucide--circle-check]" dismissible="true" dismissLabel="Dismiss alert" role="alert" live="polite" linkLabel="" linkHref="" actionLabel="" actionHref="" compact="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Success message usage">
|
||||
@@ -118,7 +118,7 @@ page AlertDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="alert-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Alert size="default" color="info" variant="soft" class="" radius="md" shadow="none" title="Scheduled maintenance" description="The dashboard will be unavailable Sunday, 02:00–02:30 UTC." items='[]' actions='[]' showIcon="true" icon="icon-[lucide--info]" dismissible="true" dismissLabel="Dismiss alert" role="alert" live="polite" linkLabel="" linkHref="" actionLabel="" actionHref="" compact="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Informational notice usage">
|
||||
@@ -150,7 +150,7 @@ page AlertDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="alert-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Alert size="default" color="warning" variant="soft" class="" radius="md" shadow="none" title="Payment needs attention" description="Update your payment method to keep your subscription active." items='[]' actions='[]' showIcon="true" icon="icon-[lucide--triangle-alert]" dismissible="true" dismissLabel="Dismiss alert" role="alert" live="polite" linkLabel="" linkHref="" actionLabel="Update payment" actionHref="#payment" compact="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Action required usage">
|
||||
|
||||
@@ -120,7 +120,7 @@ page AvatarGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="avatar-group-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AvatarGroup items='[{"name":"Aisha Khan","initials":"AK","tooltip":"Aisha Khan · Product designer"},{"name":"Daniel Lee","initials":"DL","tooltip":"Daniel Lee · Engineer"},{"name":"Maya Patel","initials":"MP","tooltip":"Maya Patel · Product manager"},{"name":"Oliver Reed","initials":"OR","tooltip":"Oliver Reed · Support"},{"name":"Sofia Chen","initials":"SC","tooltip":"Sofia Chen · Operations"}]' size="md" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="3" columns="3" borderColor="" showTooltips="true" overflowLabel="Show remaining members" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -171,7 +171,7 @@ page AvatarGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="avatar-group-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AvatarGroup items='[{"name":"Aisha Khan","initials":"AK","tooltip":"Aisha Khan · Product designer"},{"name":"Daniel Lee","initials":"DL","tooltip":"Daniel Lee · Engineer"},{"name":"Maya Patel","initials":"MP","tooltip":"Maya Patel · Product manager"},{"name":"Oliver Reed","initials":"OR","tooltip":"Oliver Reed · Support"},{"name":"Sofia Chen","initials":"SC","tooltip":"Sofia Chen · Operations"}]' size="sm" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="3" columns="3" borderColor="" showTooltips="true" overflowLabel="Show remaining members" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -223,7 +223,7 @@ page AvatarGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="avatar-group-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AvatarGroup items='[{"name":"Aisha Khan","initials":"AK","tooltip":"Aisha Khan · Product designer"},{"name":"Daniel Lee","initials":"DL","tooltip":"Daniel Lee · Engineer"},{"name":"Maya Patel","initials":"MP","tooltip":"Maya Patel · Product manager"},{"name":"Oliver Reed","initials":"OR","tooltip":"Oliver Reed · Support"},{"name":"Sofia Chen","initials":"SC","tooltip":"Sofia Chen · Operations"}]' size="md" color="primary" variant="solid" shape="circle" layout="grid" maxVisible="3" columns="3" borderColor="" showTooltips="true" overflowLabel="Show remaining members" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -71,7 +71,7 @@ page AvatarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="avatar-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Avatar src="" alt="Aisha Khan" initials="AK" size="md" color="primary" variant="solid" shape="circle" status="" statusLabel="" statusPosition="bottom" badge="" badgeIcon="" badgeLabel="" tooltip="Aisha Khan · Product designer" name="Aisha Khan" description="" loading="lazy" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -93,7 +93,7 @@ page AvatarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="avatar-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Avatar src="" alt="Aisha Khan" initials="AK" size="sm" color="primary" variant="solid" shape="circle" status="" statusLabel="" statusPosition="bottom" badge="" badgeIcon="" badgeLabel="" tooltip="Aisha Khan · Product designer" name="Aisha Khan" description="" loading="lazy" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -116,7 +116,7 @@ page AvatarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="avatar-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Avatar src="" alt="Aisha Khan" initials="AK" size="md" color="primary" variant="solid" shape="circle" status="online" statusLabel="" statusPosition="bottom" badge="" badgeIcon="" badgeLabel="" tooltip="Aisha Khan · Product designer" name="Aisha Khan" description="Product designer" loading="lazy" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -44,7 +44,7 @@ page BackToTopDetail {
|
||||
<pre><code data-playground-code><BackToTop /></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>15 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -63,7 +63,7 @@ page BackToTopDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="back-to-top-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><BackToTop threshold="500" label="Back to top" ariaLabel="Scroll back to top" icon="icon-[lucide--arrow-up]" position="right" offset="md" behavior="smooth" showProgress="false" showLabel="false" alwaysVisible="true" size="default" color="primary" variant="solid" shape="round" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Floating round control usage">
|
||||
@@ -82,7 +82,7 @@ page BackToTopDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="back-to-top-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><BackToTop threshold="500" label="Back to top" ariaLabel="Scroll back to top" icon="icon-[lucide--arrow-up]" position="right" offset="md" behavior="smooth" showProgress="false" showLabel="true" alwaysVisible="true" size="default" color="primary" variant="soft" shape="pill" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Pill control with label usage">
|
||||
@@ -104,7 +104,7 @@ page BackToTopDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="back-to-top-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><BackToTop threshold="500" label="Back to top" ariaLabel="Scroll back to top" icon="icon-[lucide--arrow-up]" position="left" offset="lg" behavior="smooth" showProgress="true" showLabel="false" alwaysVisible="true" size="default" color="primary" variant="outline" shape="round" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Progress-aware control usage">
|
||||
@@ -119,7 +119,7 @@ page BackToTopDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>threshold</code></td><td>number</td><td><code>500</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Back to top"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Scroll back to top"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--arrow-up]"</code></td><td>No</td></tr><tr><td><code>position</code></td><td>string</td><td><code>"right"</code></td><td>No</td></tr><tr><td><code>offset</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>behavior</code></td><td>string</td><td><code>"smooth"</code></td><td>No</td></tr><tr><td><code>showProgress</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>alwaysVisible</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>shape</code></td><td>string</td><td><code>"round"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -76,7 +76,7 @@ page BadgeDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="badge-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Badge label="Active" humanize="true" size="sm" color="success" variant="soft" class="showcase-instance showcase-instance--1" icon="" dot="false" dotOnly="false" dotLabel="Status" animated="false" dismissible="false" dismissLabel="Remove badge" truncate="false" anchorLabel="" anchorIcon="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -98,7 +98,7 @@ page BadgeDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="badge-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Badge label="In review" humanize="true" size="sm" color="warning" variant="outline" class="showcase-instance showcase-instance--2" icon="" dot="false" dotOnly="false" dotLabel="Status" animated="false" dismissible="false" dismissLabel="Remove badge" truncate="false" anchorLabel="" anchorIcon="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -120,7 +120,7 @@ page BadgeDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="badge-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Badge label="Verified" humanize="true" size="sm" color="primary" variant="solid" class="showcase-instance showcase-instance--3" icon="icon-[lucide--check]" dot="false" dotOnly="false" dotLabel="Status" animated="false" dismissible="true" dismissLabel="Remove badge" truncate="false" anchorLabel="" anchorIcon="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -46,7 +46,7 @@ page BlockquoteDetail {
|
||||
/></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>14 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -65,7 +65,7 @@ page BlockquoteDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="blockquote-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Blockquote citationTitle="Blockquote example" size="md" align="start" variant="default" quoteMark="true" italic="true" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -85,7 +85,7 @@ page BlockquoteDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="blockquote-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Blockquote citationTitle="Compact Blockquote" size="sm" align="center" variant="secondary" quoteMark="true" italic="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -107,7 +107,7 @@ page BlockquoteDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="blockquote-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Blockquote citationTitle="Advanced Blockquote" size="lg" align="end" variant="success" quoteMark="true" italic="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
@@ -121,7 +121,7 @@ page BlockquoteDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>quote</code></td><td>string</td><td><code>"I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."</code></td><td>No</td></tr><tr><td><code>citation</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>citationTitle</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>citationUrl</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarSrc</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>quoteMark</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>italic</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -285,7 +285,7 @@ page BreadcrumbDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="breadcrumb-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Breadcrumb label="Breadcrumb" items='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' showHome="true" homeLabel="Breadcrumb" homeHref="#breadcrumb-demo" size="small" variant="minimal" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Minimal page trail usage">
|
||||
@@ -327,7 +327,7 @@ page BreadcrumbDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="breadcrumb-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Breadcrumb label="Compact example" items='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' showHome="true" homeLabel="Compact example" homeHref="#breadcrumb-demo" size="medium" variant="soft" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Soft navigation trail usage">
|
||||
@@ -371,7 +371,7 @@ page BreadcrumbDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="breadcrumb-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Breadcrumb label="Advanced example" items='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' separator="slash" showHome="true" homeLabel="Advanced example" homeHref="#breadcrumb-demo" size="large" variant="outline" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Large directory breadcrumb usage">
|
||||
|
||||
@@ -96,7 +96,7 @@ page ButtonGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-group-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ButtonGroup items='[{"label":"Day","value":"day"},{"label":"Week","value":"week"},{"label":"Month","value":"month"}]' value="week" size="md" color="primary" variant="default" orientation="horizontal" responsive="false" attached="true" selectable="true" toolbar="false" disabled="false" ariaLabel="Button group" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -135,7 +135,7 @@ page ButtonGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-group-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ButtonGroup items='[{"label":"Day","value":"day"},{"label":"Week","value":"week"},{"label":"Month","value":"month"}]' value="week" size="sm" color="primary" variant="default" orientation="horizontal" responsive="false" attached="true" selectable="true" toolbar="false" disabled="false" ariaLabel="Button group" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -175,7 +175,7 @@ page ButtonGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-group-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ButtonGroup items='[{"label":"Day","value":"day"},{"label":"Week","value":"week"},{"label":"Month","value":"month"}]' value="week" size="md" color="primary" variant="default" orientation="horizontal" responsive="false" attached="false" selectable="true" toolbar="false" disabled="false" ariaLabel="Button group" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -78,7 +78,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Button label="Save & Submit" as="button" type="submit" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Primary action usage">
|
||||
@@ -99,7 +99,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Button label="Learn more" as="a" href="#button-demo" variant="outline" size="sm" icon="icon-[lucide--arrow-right]" iconPosition="end" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Secondary navigation usage">
|
||||
@@ -124,7 +124,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Button label="Upgrade plan" as="button" variant="secondary" size="lg" pill="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Prominent rounded action usage">
|
||||
@@ -147,7 +147,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Button label="Open settings" as="button" variant="ghost" size="icon" icon="icon-[lucide--settings]" ariaLabel="Open settings" class="showcase-instance showcase-instance--4" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Accessible icon action usage">
|
||||
@@ -171,7 +171,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Button label="Delete project" as="button" variant="destructive" icon="icon-[lucide--trash-2]" class="showcase-instance showcase-instance--5" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Dangerous action usage">
|
||||
@@ -193,7 +193,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Button label="Read documentation" as="a" href="#button-demo" variant="link" class="showcase-instance showcase-instance--6" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Inline action usage">
|
||||
@@ -215,7 +215,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Button label="Publish" loadingLabel="Publishing…" as="button" loading="true" class="showcase-instance showcase-instance--7" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Pending action usage">
|
||||
@@ -237,7 +237,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Button label="Unavailable action" as="button" variant="outline" disabled="true" class="showcase-instance showcase-instance--8" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Unavailable action usage">
|
||||
|
||||
@@ -108,7 +108,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Card title="Citizen service" icon="" titleKey="" subtitle="" subtitleKey="" description="Access a trusted online service." descriptionKey="" showHeader="true" showFooter="true" header="" footer="" imageSrc="" imageAlt="" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="md" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class=""><p class="showcase-card-copy">Supporting content belongs inside the default slot.</p></Card></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Structured content card usage">
|
||||
@@ -145,7 +145,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Card title="Open requests" icon="" titleKey="" subtitle="" subtitleKey="" description="Requests waiting for assignment." descriptionKey="" showHeader="true" showFooter="true" header="" footer="" imageSrc="" imageAlt="" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="compact" color="primary" variant="soft" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class=""><strong class="showcase-card-value">38</strong></Card></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact dashboard card usage">
|
||||
@@ -184,7 +184,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Card title="Featured guide" icon="" titleKey="" subtitle="" subtitleKey="" description="A complete guide to public safety and emergency readiness." descriptionKey="" showHeader="true" showFooter="true" header="" footer="" imageSrc="" imageAlt="" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="lg" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class=""><a href="#guide" class="showcase-action">Read guide</a></Card></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Featured resource usage">
|
||||
@@ -222,7 +222,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Card title="Design your next chapter" icon="" titleKey="" subtitle="" subtitleKey="" description="A practical guide to building thoughtful products." descriptionKey="" showHeader="true" showFooter="true" header="" footer="6 min read" imageSrc="/showcase-images/green-hero.svg" imageAlt="Green abstract cover" imagePosition="top" actionLabel="Read guide" actionLabelKey="" actionHref="#guide" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="md" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Image with footer usage">
|
||||
@@ -263,7 +263,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Card title="" icon="" titleKey="" subtitle="" subtitleKey="" description="Your workspace is ready. Invite your teammates to get started." descriptionKey="" showHeader="true" showFooter="true" header="" footer="Updated just now" imageSrc="" imageAlt="" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="md" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Without a header usage">
|
||||
@@ -299,7 +299,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Card title="" icon="" titleKey="" subtitle="" subtitleKey="" description="" descriptionKey="" showHeader="true" showFooter="true" header="" footer="" imageSrc="/showcase-images/blue-mountain.svg" imageAlt="Blue geometric landscape" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="md" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Image-only card usage">
|
||||
@@ -335,7 +335,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Card title="" icon="" titleKey="" subtitle="" subtitleKey="" description="" descriptionKey="" showHeader="true" showFooter="true" header="" footer="" imageSrc="" imageAlt="" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="md" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class=""><div data-slot="header"><strong>Team invitation</strong></div><Input label="Email" placeholder="name@company.com" /><div data-slot="footer"><Button label="Send invitation" /></div></Card></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Custom slots usage">
|
||||
|
||||
@@ -113,7 +113,7 @@ page CarouselDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="carousel-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Carousel size="default" color="primary" title="" description="" items='[{"title":"A space to create","description":"Bring your next idea to life.","imageSrc":"/showcase-images/green-hero.svg"},{"title":"Made for teamwork","description":"Keep everyone moving together.","imageSrc":"/showcase-images/blue-mountain.svg"},{"title":"Room to grow","description":"Build something that matters.","imageSrc":"/showcase-images/violet-circle.svg"}]' activeIndex="0" slidesPerView="1" gap="0.75rem" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" thumbnails="none" ariaLabel="Product highlights" framed="false" variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Full-width, unframed usage">
|
||||
@@ -156,7 +156,7 @@ page CarouselDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="carousel-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Carousel size="default" color="primary" title="" description="" items='[{"title":"A space to create","description":"Bring your next idea to life.","imageSrc":"/showcase-images/green-hero.svg"},{"title":"Made for teamwork","description":"Keep everyone moving together.","imageSrc":"/showcase-images/blue-mountain.svg"},{"title":"Room to grow","description":"Build something that matters.","imageSrc":"/showcase-images/violet-circle.svg"}]' activeIndex="0" slidesPerView="1" gap="0.75rem" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" thumbnails="none" ariaLabel="Product highlights" framed="true" variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Framed gallery usage">
|
||||
@@ -200,7 +200,7 @@ page CarouselDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="carousel-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Carousel size="default" color="primary" title="" description="" items='[{"title":"A space to create","description":"Bring your next idea to life.","imageSrc":"/showcase-images/green-hero.svg"},{"title":"Made for teamwork","description":"Keep everyone moving together.","imageSrc":"/showcase-images/blue-mountain.svg"},{"title":"Room to grow","description":"Build something that matters.","imageSrc":"/showcase-images/violet-circle.svg"}]' activeIndex="0" slidesPerView="1" gap="0.75rem" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="true" isAutoHeight="false" isSnap="false" showCounter="true" thumbnails="none" ariaLabel="Product highlights" framed="false" variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Draggable slides usage">
|
||||
|
||||
+601
-62
@@ -5,6 +5,9 @@ page ChartDetail {
|
||||
state playground_description = ctx.url.searchParams.get("pg_description") ?? "Completed tasks this week"
|
||||
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"label\":\"Mon\",\"value\":24},{\"label\":\"Tue\",\"value\":38},{\"label\":\"Wed\",\"value\":29},{\"label\":\"Thu\",\"value\":52},{\"label\":\"Fri\",\"value\":45}]")
|
||||
state playground_data = JSON.parse(ctx.url.searchParams.get("pg_data") ?? "[]")
|
||||
state playground_labels = JSON.parse(ctx.url.searchParams.get("pg_labels") ?? "[]")
|
||||
state playground_datasets = JSON.parse(ctx.url.searchParams.get("pg_datasets") ?? "[]")
|
||||
state playground_options = JSON.parse(ctx.url.searchParams.get("pg_options") ?? "{}")
|
||||
state playground_type = ctx.url.searchParams.get("pg_type") ?? ""
|
||||
state playground_valueKey = ctx.url.searchParams.get("pg_valueKey") ?? "value"
|
||||
state playground_labelKey = ctx.url.searchParams.get("pg_labelKey") ?? "label"
|
||||
@@ -15,6 +18,17 @@ page ChartDetail {
|
||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "bar"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||
state demo_obj_0 = JSON.parse("{\"labels\":[\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\"],\"datasets\":[{\"label\":\"Series A\",\"data\":[24,38,29,52,45]}]}")
|
||||
state demo_obj_1 = JSON.parse("{\"labels\":[\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\"],\"datasets\":[{\"label\":\"Series A\",\"data\":[24,38,29,52,45]}]}")
|
||||
state demo_obj_2 = JSON.parse("{\"labels\":[\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\"],\"datasets\":[{\"label\":\"Series A\",\"data\":[24,38,29,52,45]}]}")
|
||||
state demo_obj_3 = JSON.parse("{\"labels\":[\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\"],\"datasets\":[{\"label\":\"Series A\",\"data\":[24,38,29,52,45]}]}")
|
||||
state demo_obj_4 = JSON.parse("{\"labels\":[\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\"],\"datasets\":[{\"label\":\"Series A\",\"data\":[24,38,29,52,45]}]}")
|
||||
state demo_obj_5 = JSON.parse("{\"labels\":[\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\"],\"datasets\":[{\"label\":\"Series A\",\"data\":[24,38,29,52,45]}]}")
|
||||
state demo_obj_6 = JSON.parse("{\"datasets\":[{\"label\":\"Observations\",\"data\":[{\"x\":1,\"y\":4},{\"x\":3,\"y\":8},{\"x\":5,\"y\":3}]}]}")
|
||||
state demo_obj_7 = JSON.parse("{\"datasets\":[{\"label\":\"Observations\",\"data\":[{\"x\":1,\"y\":4,\"r\":8},{\"x\":3,\"y\":8,\"r\":16},{\"x\":5,\"y\":3,\"r\":12}]}]}")
|
||||
state demo_obj_8 = JSON.parse("{\"labels\":[\"Jan\",\"Feb\",\"Mar\"],\"datasets\":[{\"type\":\"bar\",\"label\":\"Actual\",\"data\":[20,35,28]},{\"type\":\"line\",\"label\":\"Target\",\"data\":[25,30,40]}]}")
|
||||
state demo_obj_9 = JSON.parse("{\"labels\":[\"Jan\",\"Feb\",\"Mar\"],\"datasets\":[{\"label\":\"A\",\"data\":[20,35,28]},{\"label\":\"B\",\"data\":[25,30,40]}]}")
|
||||
state demo_obj_10 = JSON.parse("{\"indexAxis\":\"y\",\"scales\":{\"x\":{\"stacked\":true},\"y\":{\"stacked\":true}}}")
|
||||
seo {
|
||||
title = "Chart"
|
||||
description = "Theme-aware, responsive chart component."
|
||||
@@ -28,7 +42,7 @@ page ChartDetail {
|
||||
<span class="showcase-eyebrow">Integrations component</span>
|
||||
<h1>Chart</h1>
|
||||
<p>Theme-aware, responsive chart component.</p>
|
||||
<div class="detail-badges"><span>14 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
<div class="detail-badges"><span>17 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
</div>
|
||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||
</header>
|
||||
@@ -37,7 +51,7 @@ page ChartDetail {
|
||||
<div class="playground-workbench">
|
||||
<div class="playground-preview">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="playground-preview-source" data-playground-preview><Chart title='{playground_title}' description='{playground_description}' items='{playground_items}' data='{playground_data}' type='{playground_type}' valueKey='{playground_valueKey}' labelKey='{playground_labelKey}' height='{playground_height}' showLegend='{playground_showLegend}' showValues='{playground_showValues}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' class='{playground_class}' /></div>
|
||||
<div class="playground-preview-source" data-playground-preview><Chart title='{playground_title}' description='{playground_description}' items='{playground_items}' data='{playground_data}' labels='{playground_labels}' datasets='{playground_datasets}' options='{playground_options}' type='{playground_type}' valueKey='{playground_valueKey}' labelKey='{playground_labelKey}' height='{playground_height}' showLegend='{playground_showLegend}' showValues='{playground_showValues}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' class='{playground_class}' /></div>
|
||||
<section class="playground-code" aria-label="Current component code">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||
<pre><code data-playground-code>page ChartExample <span>{</span>
|
||||
@@ -63,13 +77,15 @@ page ChartDetail {
|
||||
"value": 45
|
||||
<span>}</span>
|
||||
]
|
||||
state data = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Weekly activity"
|
||||
description="Completed tasks this week"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data="<span>{</span>data<span>}</span>"
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
height="220"
|
||||
showLegend="false"
|
||||
/>
|
||||
@@ -80,7 +96,7 @@ page ChartDetail {
|
||||
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>14 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<header><div><span>Component props</span><strong>17 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-chart-title"><span><strong>title</strong><small>string</small></span><input id="playground-chart-title" name="pg_title" type="text" value="Weekly activity" /></label><label class="playground-field" for="playground-chart-description"><span><strong>description</strong><small>string</small></span><input id="playground-chart-description" name="pg_description" type="text" value="Completed tasks this week" /></label><label class="playground-field" for="playground-chart-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-chart-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
"label": "Mon",
|
||||
@@ -102,7 +118,7 @@ page ChartDetail {
|
||||
"label": "Fri",
|
||||
"value": 45
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-data"><span><strong>data</strong><small>unknown[]</small></span><textarea id="playground-chart-data" name="pg_data" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-type"><span><strong>type</strong><small>string</small></span><select id="playground-chart-type" name="pg_type"><option value="" selected>Auto / default</option><option value="bar">bar</option><option value="line">line</option></select></label><label class="playground-field" for="playground-chart-valueKey"><span><strong>value Key</strong><small>string</small></span><input id="playground-chart-valueKey" name="pg_valueKey" type="text" value="value" /></label><label class="playground-field" for="playground-chart-labelKey"><span><strong>label Key</strong><small>string</small></span><input id="playground-chart-labelKey" name="pg_labelKey" type="text" value="label" /></label><label class="playground-field" for="playground-chart-height"><span><strong>height</strong><small>number</small></span><input id="playground-chart-height" name="pg_height" type="number" value="220" /></label><label class="playground-toggle" for="playground-chart-showLegend"><span><strong>show Legend</strong><small>boolean</small></span><input id="playground-chart-showLegend" name="pg_showLegend" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chart-showValues"><span><strong>show Values</strong><small>boolean</small></span><input id="playground-chart-showValues" name="pg_showValues" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chart-size"><span><strong>size</strong><small>string</small></span><select id="playground-chart-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-chart-color"><span><strong>color</strong><small>string</small></span><select id="playground-chart-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-chart-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chart-variant" name="pg_variant" type="text" value="bar" /></label><label class="playground-field" for="playground-chart-class"><span><strong>class</strong><small>string</small></span><input id="playground-chart-class" name="pg_class" type="text" value="" /></label></div>
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-data"><span><strong>data</strong><small>unknown</small></span><input id="playground-chart-data" name="pg_data" type="text" value="" /></label><label class="playground-field" for="playground-chart-labels"><span><strong>labels</strong><small>unknown[]</small></span><textarea id="playground-chart-labels" name="pg_labels" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-datasets"><span><strong>datasets</strong><small>unknown[]</small></span><textarea id="playground-chart-datasets" name="pg_datasets" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-options"><span><strong>options</strong><small>object</small></span><textarea id="playground-chart-options" name="pg_options" rows="5" spellcheck="false" data-playground-json></textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-type"><span><strong>type</strong><small>string</small></span><select id="playground-chart-type" name="pg_type"><option value="" selected>Auto / default</option><option value="bar">bar</option><option value="line">line</option><option value="area">area</option><option value="pie">pie</option><option value="doughnut">doughnut</option><option value="radar">radar</option><option value="polarArea">polarArea</option><option value="scatter">scatter</option><option value="bubble">bubble</option></select></label><label class="playground-field" for="playground-chart-valueKey"><span><strong>value Key</strong><small>string</small></span><input id="playground-chart-valueKey" name="pg_valueKey" type="text" value="value" /></label><label class="playground-field" for="playground-chart-labelKey"><span><strong>label Key</strong><small>string</small></span><input id="playground-chart-labelKey" name="pg_labelKey" type="text" value="label" /></label><label class="playground-field" for="playground-chart-height"><span><strong>height</strong><small>number</small></span><input id="playground-chart-height" name="pg_height" type="number" value="220" /></label><label class="playground-toggle" for="playground-chart-showLegend"><span><strong>show Legend</strong><small>boolean</small></span><input id="playground-chart-showLegend" name="pg_showLegend" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chart-showValues"><span><strong>show Values</strong><small>boolean</small></span><input id="playground-chart-showValues" name="pg_showValues" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chart-size"><span><strong>size</strong><small>string</small></span><select id="playground-chart-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-chart-color"><span><strong>color</strong><small>string</small></span><select id="playground-chart-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-chart-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chart-variant" name="pg_variant" type="text" value="bar" /></label><label class="playground-field" for="playground-chart-class"><span><strong>class</strong><small>string</small></span><input id="playground-chart-class" name="pg_class" type="text" value="" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -111,50 +127,53 @@ page ChartDetail {
|
||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Bar chart</h2><p>Pass an array of label/value objects through data.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Bar chart</h2><p>Chart.js bars with positive and negative values.</p></div>
|
||||
<span class="demo-case-number">01</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Weekly signups" description="Completed tasks this week" items='[]' data='[{"label":"Mon","value":24},{"label":"Tue","value":38},{"label":"Wed","value":29},{"label":"Thu","value":52},{"label":"Fri","value":45}]' type="bar" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="true" size="default" color="primary" variant="bar" class="" /></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample weekly changes" description="Sample data" items='[]' data='[{"label":"Mon","value":24},{"label":"Tue","value":-12},{"label":"Wed","value":29},{"label":"Thu","value":52},{"label":"Fri","value":45}]' labels='[]' datasets='[]' type="bar" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Bar chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state data = [
|
||||
<span>{</span>
|
||||
"label": "Mon",
|
||||
"value": 24
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Tue",
|
||||
"value": 38
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Wed",
|
||||
"value": 29
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Thu",
|
||||
"value": 52
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Fri",
|
||||
"value": 45
|
||||
<span>}</span>
|
||||
]
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Weekly signups"
|
||||
description="Completed tasks this week"
|
||||
title="Sample weekly changes"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data="<span>{</span>data<span>}</span>"
|
||||
data='[
|
||||
<span>{</span>
|
||||
"label": "Mon",
|
||||
"value": 24
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Tue",
|
||||
"value": -12
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Wed",
|
||||
"value": 29
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Thu",
|
||||
"value": 52
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Fri",
|
||||
"value": 45
|
||||
<span>}</span>
|
||||
]'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="bar"
|
||||
height="220"
|
||||
showLegend="false"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
@@ -163,46 +182,566 @@ page ChartDetail {
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>Line chart</h2><p>Use type=line to compare a trend over time.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>line chart</h2><p>Rendered by Chart.js with native tooltips and legend interactions.</p></div>
|
||||
<span class="demo-case-number">02</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Monthly revenue" description="Completed tasks this week" items='[]' data='[{"label":"Jan","value":20},{"label":"Feb","value":35},{"label":"Mar","value":28},{"label":"Apr","value":55}]' type="line" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="true" size="default" color="primary" variant="bar" class="" /></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample line" description="Sample data" items='[]' data='{demo_obj_0}' labels='[]' datasets='[]' type="line" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Line chart usage">
|
||||
<section class="demo-code" aria-label="line chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state data = [
|
||||
<span>{</span>
|
||||
"label": "Jan",
|
||||
"value": 20
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Feb",
|
||||
"value": 35
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Mar",
|
||||
"value": 28
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Apr",
|
||||
"value": 55
|
||||
<span>}</span>
|
||||
]
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Monthly revenue"
|
||||
description="Completed tasks this week"
|
||||
title="Sample line"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data="<span>{</span>data<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Series A",
|
||||
"data": [
|
||||
24,
|
||||
38,
|
||||
29,
|
||||
52,
|
||||
45
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="line"
|
||||
height="220"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>area chart</h2><p>Rendered by Chart.js with native tooltips and legend interactions.</p></div>
|
||||
<span class="demo-case-number">03</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample area" description="Sample data" items='[]' data='{demo_obj_1}' labels='[]' datasets='[]' type="area" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="area chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample area"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Series A",
|
||||
"data": [
|
||||
24,
|
||||
38,
|
||||
29,
|
||||
52,
|
||||
45
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="area"
|
||||
height="220"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>pie chart</h2><p>Rendered by Chart.js with native tooltips and legend interactions.</p></div>
|
||||
<span class="demo-case-number">04</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample pie" description="Sample data" items='[]' data='{demo_obj_2}' labels='[]' datasets='[]' type="pie" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="pie chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample pie"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Series A",
|
||||
"data": [
|
||||
24,
|
||||
38,
|
||||
29,
|
||||
52,
|
||||
45
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="pie"
|
||||
height="220"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>doughnut chart</h2><p>Rendered by Chart.js with native tooltips and legend interactions.</p></div>
|
||||
<span class="demo-case-number">05</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample doughnut" description="Sample data" items='[]' data='{demo_obj_3}' labels='[]' datasets='[]' type="doughnut" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="doughnut chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample doughnut"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Series A",
|
||||
"data": [
|
||||
24,
|
||||
38,
|
||||
29,
|
||||
52,
|
||||
45
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="doughnut"
|
||||
height="220"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>radar chart</h2><p>Rendered by Chart.js with native tooltips and legend interactions.</p></div>
|
||||
<span class="demo-case-number">06</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample radar" description="Sample data" items='[]' data='{demo_obj_4}' labels='[]' datasets='[]' type="radar" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="radar chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample radar"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Series A",
|
||||
"data": [
|
||||
24,
|
||||
38,
|
||||
29,
|
||||
52,
|
||||
45
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="radar"
|
||||
height="220"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>polarArea chart</h2><p>Rendered by Chart.js with native tooltips and legend interactions.</p></div>
|
||||
<span class="demo-case-number">07</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample polarArea" description="Sample data" items='[]' data='{demo_obj_5}' labels='[]' datasets='[]' type="polarArea" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="polarArea chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample polarArea"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Series A",
|
||||
"data": [
|
||||
24,
|
||||
38,
|
||||
29,
|
||||
52,
|
||||
45
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="polarArea"
|
||||
height="220"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>Scatter chart</h2><p>Pass native x/y coordinates without flattening them.</p></div>
|
||||
<span class="demo-case-number">08</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample coordinates" description="Sample data" items='[]' data='{demo_obj_6}' labels='[]' datasets='[]' type="scatter" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Scatter chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample coordinates"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Observations",
|
||||
"data": [
|
||||
<span>{</span>
|
||||
"x": 1,
|
||||
"y": 4
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"x": 3,
|
||||
"y": 8
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"x": 5,
|
||||
"y": 3
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="scatter"
|
||||
height="220"
|
||||
showLegend="false"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>Bubble chart</h2><p>Native x/y/r points preserve bubble radii.</p></div>
|
||||
<span class="demo-case-number">09</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample bubbles" description="Sample data" items='[]' data='{demo_obj_7}' labels='[]' datasets='[]' type="bubble" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Bubble chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample bubbles"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Observations",
|
||||
"data": [
|
||||
<span>{</span>
|
||||
"x": 1,
|
||||
"y": 4,
|
||||
"r": 8
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"x": 3,
|
||||
"y": 8,
|
||||
"r": 16
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"x": 5,
|
||||
"y": 3,
|
||||
"r": 12
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="bubble"
|
||||
height="220"
|
||||
showLegend="false"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>Mixed chart</h2><p>Set each dataset's type and pass native Chart.js options.</p></div>
|
||||
<span class="demo-case-number">010</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-10" class="demo-canvas demo-canvas--10">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample mixed chart" description="Sample data" items='[]' data='{demo_obj_8}' labels='[]' datasets='[]' type="bar" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Mixed chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample mixed chart"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"type": "bar",
|
||||
"label": "Actual",
|
||||
"data": [
|
||||
20,
|
||||
35,
|
||||
28
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"type": "line",
|
||||
"label": "Target",
|
||||
"data": [
|
||||
25,
|
||||
30,
|
||||
40
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="bar"
|
||||
height="220"
|
||||
showLegend="false"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>Horizontal stacked bars</h2><p>Configure indexAxis and stacked scales through options.</p></div>
|
||||
<span class="demo-case-number">011</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-11" class="demo-canvas demo-canvas--11">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample stacked chart" description="Sample data" items='[]' data='{demo_obj_9}' labels='[]' datasets='[]' options='{demo_obj_10}' type="bar" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal stacked bars usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample stacked chart"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "A",
|
||||
"data": [
|
||||
20,
|
||||
35,
|
||||
28
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "B",
|
||||
"data": [
|
||||
25,
|
||||
30,
|
||||
40
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
options='<span>{</span>
|
||||
"indexAxis": "y",
|
||||
"scales": <span>{</span>
|
||||
"x": <span>{</span>
|
||||
"stacked": true
|
||||
<span>}</span>,
|
||||
"y": <span>{</span>
|
||||
"stacked": true
|
||||
<span>}</span>
|
||||
<span>}</span>
|
||||
<span>}</span>'
|
||||
type="bar"
|
||||
height="220"
|
||||
showLegend="false"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
@@ -228,10 +767,10 @@ if (component) registerOutputHandler(component, "dataPointClick", (payload) =>
|
||||
if (component) registerOutputHandler(component, "legendToggle", (payload) => <span>{</span>
|
||||
console.log("legendToggle", payload)
|
||||
<span>}</span>)</code></pre></section></div></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>title</code></td><td>string</td><td><code>"Chart"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>data</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>valueKey</code></td><td>string</td><td><code>"value"</code></td><td>No</td></tr><tr><td><code>labelKey</code></td><td>string</td><td><code>"label"</code></td><td>No</td></tr><tr><td><code>height</code></td><td>number</td><td><code>240</code></td><td>No</td></tr><tr><td><code>showLegend</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showValues</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"bar"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>title</code></td><td>string</td><td><code>"Chart"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>data</code></td><td>unknown</td><td><code>undefined</code></td><td>No</td></tr><tr><td><code>labels</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>datasets</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>options</code></td><td>object</td><td><code><span>{</span><span>}</span></code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>valueKey</code></td><td>string</td><td><code>"value"</code></td><td>No</td></tr><tr><td><code>labelKey</code></td><td>string</td><td><code>"label"</code></td><td>No</td></tr><tr><td><code>height</code></td><td>number</td><td><code>240</code></td><td>No</td></tr><tr><td><code>showLegend</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showValues</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"bar"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#chart-demo-1">Bar chart</a><a href="#chart-demo-2">Line chart</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#chart-demo-1">Bar chart</a><a href="#chart-demo-2">line chart</a><a href="#chart-demo-3">area chart</a><a href="#chart-demo-4">pie chart</a><a href="#chart-demo-5">doughnut chart</a><a href="#chart-demo-6">radar chart</a><a href="#chart-demo-7">polarArea chart</a><a href="#chart-demo-8">Scatter chart</a><a href="#chart-demo-9">Bubble chart</a><a href="#chart-demo-10">Mixed chart</a><a href="#chart-demo-11">Horizontal stacked bars</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
|
||||
@@ -153,7 +153,7 @@ page ChatBubbleDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="chat-bubble-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -221,7 +221,7 @@ page ChatBubbleDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="chat-bubble-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -289,7 +289,7 @@ page ChatBubbleDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="chat-bubble-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -514,7 +514,7 @@ page CheckboxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="checkbox-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Checkbox size="default" label="Checkbox" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" values='[{"id":"checkbox-0-1","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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":"checkbox-0-2","key":"checkbox-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#checkbox-demo","actionHref":"#checkbox-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"]}]' options='[{"id":"checkbox-0-1","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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":"checkbox-0-2","key":"checkbox-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#checkbox-demo","actionHref":"#checkbox-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"]}]' checked="false" indeterminate="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -756,7 +756,7 @@ page CheckboxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="checkbox-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Checkbox size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" value="sample-2" values='[{"id":"checkbox-1-1","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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":"checkbox-1-2","key":"checkbox-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#checkbox-demo","actionHref":"#checkbox-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"]}]' options='[{"id":"checkbox-1-1","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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":"checkbox-1-2","key":"checkbox-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#checkbox-demo","actionHref":"#checkbox-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"]}]' checked="false" indeterminate="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -1002,7 +1002,7 @@ page CheckboxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="checkbox-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Checkbox size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" value="sample-3" values='[{"id":"checkbox-2-1","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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":"checkbox-2-2","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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"]}]' options='[{"id":"checkbox-2-1","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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":"checkbox-2-2","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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"]}]' checked="false" indeterminate="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -62,7 +62,7 @@ page ClipboardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="clipboard-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Clipboard value="npm install @wrnexus/ui" label="Copy" copiedLabel="Copied" errorLabel="Copy failed" title="" description="" iconOnly="false" code="true" size="default" color="primary" disabled="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -81,7 +81,7 @@ page ClipboardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="clipboard-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Clipboard value="npm install @wrnexus/ui" label="Copy" copiedLabel="Copied" errorLabel="Copy failed" title="" description="" iconOnly="true" code="true" size="default" color="primary" disabled="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -101,7 +101,7 @@ page ClipboardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="clipboard-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Clipboard value="npm install @wrnexus/ui" label="Copy" copiedLabel="Copied" errorLabel="Copy failed" title="" description="" iconOnly="true" code="true" size="default" color="primary" disabled="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -494,7 +494,7 @@ page CollapseDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="collapse-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Collapse size="default" 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"]}]' multiple="false" initialOpenIndexes='[{"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"]}]' ariaLabel="Collapse 1 example" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -735,7 +735,7 @@ page CollapseDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="collapse-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><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"]}]' multiple="false" initialOpenIndexes='[{"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"]}]' ariaLabel="Collapse 2 example" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -977,7 +977,7 @@ page CollapseDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="collapse-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><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"]}]' multiple="false" initialOpenIndexes='[{"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"]}]' ariaLabel="Collapse 3 example" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -71,7 +71,7 @@ page ColorPickerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="color-picker-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ColorPicker size="default" color="primary" id="" name="brand-color" label="Brand color" hiddenLabel="false" placeholder="" value="#8b5cf6" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -92,7 +92,7 @@ page ColorPickerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="color-picker-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ColorPicker size="default" color="primary" id="" name="brand-color" label="Brand color" hiddenLabel="false" placeholder="" value="#14b8a6" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -113,7 +113,7 @@ page ColorPickerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="color-picker-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ColorPicker size="default" color="primary" id="" name="brand-color" label="Brand color" hiddenLabel="false" placeholder="" value="#3b82f6" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -35,7 +35,7 @@ page ColumnsDetail {
|
||||
<pre><code data-playground-code><Columns /></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -54,7 +54,7 @@ page ColumnsDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="columns-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Columns size="default" columns="2" gap="lg" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-grid-items"><span>Content column</span><span>Supporting column</span></div></Columns></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Two-column content layout usage">
|
||||
@@ -74,7 +74,7 @@ page ColumnsDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="columns-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Columns size="compact" columns="3" gap="sm" maxWidth="wide" class="showcase-instance showcase-instance--2"><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div></Columns></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Three compact columns usage">
|
||||
@@ -97,7 +97,7 @@ page ColumnsDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="columns-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Columns size="lg" columns="4" gap="md" maxWidth="full" class="showcase-instance showcase-instance--3"><div class="showcase-grid-items"><span>A</span><span>B</span><span>C</span><span>D</span></div></Columns></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Full-width four columns usage">
|
||||
@@ -111,7 +111,7 @@ page ColumnsDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -165,7 +165,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Default autocomplete" name="combobox-1" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Default autocomplete usage">
|
||||
@@ -226,7 +226,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Local HTML options" name="combobox-2" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Local HTML options usage">
|
||||
@@ -287,7 +287,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Grouped suggestions" name="combobox-3" value="" options='[]' groups='[{"label":"Product","options":[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"}]},{"label":"Business","options":[{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]}]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Grouped suggestions usage">
|
||||
@@ -358,7 +358,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Minimum search length" name="combobox-4" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="3" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Minimum search length usage">
|
||||
@@ -420,7 +420,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Search result limit" name="combobox-5" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="2" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Search result limit usage">
|
||||
@@ -482,7 +482,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Starts-with matching" name="combobox-6" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="startsWith" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Starts-with matching usage">
|
||||
@@ -544,7 +544,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Search labels and descriptions" name="combobox-7" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Search labels and descriptions usage">
|
||||
@@ -605,7 +605,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Suggestions with icons" name="combobox-8" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Suggestions with icons usage">
|
||||
@@ -667,7 +667,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Suggestions with avatars" name="combobox-9" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="avatar" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Suggestions with avatars usage">
|
||||
@@ -729,7 +729,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-10" class="demo-canvas demo-canvas--10">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Suggestions with color indicators" name="combobox-10" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="color" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Suggestions with color indicators usage">
|
||||
@@ -791,7 +791,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-11" class="demo-canvas demo-canvas--11">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Clearable value" name="combobox-11" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Clearable value usage">
|
||||
@@ -852,7 +852,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-12" class="demo-canvas demo-canvas--12">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Custom text values" name="combobox-12" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="true" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Custom text values usage">
|
||||
@@ -914,7 +914,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-13" class="demo-canvas demo-canvas--13">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><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":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Preselected value usage">
|
||||
@@ -976,7 +976,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-14" class="demo-canvas demo-canvas--14">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Disabled combobox" name="combobox-14" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="true" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled combobox usage">
|
||||
@@ -1038,7 +1038,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-15" class="demo-canvas demo-canvas--15">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><form data-schema="combobox-validation" class="demo-validation-form"><ComboBox label="Validation state" name="combobox-15" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="true" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /><button type="submit" class="wrn-btn wrn-btn--variant-default">Validate selection</button></form></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Validation state usage">
|
||||
@@ -1100,7 +1100,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-16" class="demo-canvas demo-canvas--16">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Remote data with automatic preload" name="combobox-16" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote data with automatic preload usage">
|
||||
@@ -1164,7 +1164,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-17" class="demo-canvas demo-canvas--17">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Remote search API" name="combobox-17" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote search API usage">
|
||||
@@ -1228,7 +1228,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-18" class="demo-canvas demo-canvas--18">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Remote query parameters" name="combobox-18" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote query parameters usage">
|
||||
@@ -1292,7 +1292,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-19" class="demo-canvas demo-canvas--19">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Infinite remote suggestions" name="combobox-19" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="true" hasMore="true" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Infinite remote suggestions usage">
|
||||
@@ -1358,7 +1358,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-20" class="demo-canvas demo-canvas--20">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Fixed-position suggestions" name="combobox-20" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="true" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Fixed-position suggestions usage">
|
||||
@@ -1420,7 +1420,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-21" class="demo-canvas demo-canvas--21">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="JavaScript methods" name="combobox-21" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="JavaScript methods usage">
|
||||
|
||||
@@ -60,7 +60,7 @@ page ConfettiDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="confetti-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Confetti label="Celebrate milestone" duration="1400" count="40" autoStart="false" disabled="false" size="default" color="primary" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -81,7 +81,7 @@ page ConfettiDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="confetti-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Confetti label="Celebrate milestone" duration="1400" count="40" autoStart="false" disabled="false" size="default" color="primary" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -102,7 +102,7 @@ page ConfettiDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="confetti-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Confetti label="Celebrate milestone" duration="1400" count="40" autoStart="false" disabled="false" size="default" color="primary" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -38,7 +38,7 @@ page ContainerDetail {
|
||||
</Container></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -57,7 +57,7 @@ page ContainerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="container-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Container size="default" columns="2" maxWidth="xl" centered="true" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Centered container content</div></Container></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Standard content container usage">
|
||||
@@ -76,7 +76,7 @@ page ContainerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="container-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Container size="compact" columns="2" maxWidth="compact" centered="true" class="showcase-instance showcase-instance--2"><div class="showcase-content-block">Compact readable content</div></Container></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact reading container usage">
|
||||
@@ -97,7 +97,7 @@ page ContainerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="container-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Container size="spacious" columns="2" maxWidth="full" centered="true" class="showcase-instance showcase-instance--3"><div class="showcase-content-block">Full-width dashboard content</div></Container></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Full-width layout container usage">
|
||||
@@ -110,7 +110,7 @@ page ContainerDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>centered</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -36,7 +36,7 @@ page CustomScrollbarDetail {
|
||||
<pre><code data-playground-code><CustomScrollbar /></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -55,7 +55,7 @@ page CustomScrollbarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="custom-scrollbar-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><CustomScrollbar size="default" axis="vertical" thickness="8" maxHeight="14rem" radius="999px" class="showcase-instance showcase-instance--1"><div class="showcase-scroll-demo"><p>Line 1. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 2. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 3. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 4. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 5. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 6. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 7. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 8. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 9. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 10. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 11. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 12. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p></div></CustomScrollbar></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Themed scrolling region usage">
|
||||
@@ -75,7 +75,7 @@ page CustomScrollbarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="custom-scrollbar-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><CustomScrollbar color="info" size="sm" axis="horizontal" thickness="14" maxHeight="8rem" radius="4px" class="showcase-instance showcase-instance--2"><div class="showcase-scroll-demo showcase-scroll-demo--wide"><span>Column 1</span><span>Column 2</span><span>Column 3</span><span>Column 4</span><span>Column 5</span><span>Column 6</span><span>Column 7</span><span>Column 8</span><span>Column 9</span><span>Column 10</span><span>Column 11</span><span>Column 12</span><span>Column 13</span><span>Column 14</span></div></CustomScrollbar></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal, thicker track usage">
|
||||
@@ -92,7 +92,7 @@ page CustomScrollbarDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>axis</code></td><td>string</td><td><code>"vertical"</code></td><td>No</td></tr><tr><td><code>thickness</code></td><td>number</td><td><code>8</code></td><td>No</td></tr><tr><td><code>maxHeight</code></td><td>string</td><td><code>"20rem"</code></td><td>No</td></tr><tr><td><code>radius</code></td><td>string</td><td><code>"999px"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -114,7 +114,7 @@ page DataMapDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-map-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataMap size="default" color="primary" title="Activity by team" description="Select a tile to inspect its activity score." items='[{"label":"Design","value":32},{"label":"Engineering","value":84},{"label":"Support","value":56},{"label":"Sales","value":45},{"label":"Marketing","value":68},{"label":"Operations","value":20}]' variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -165,7 +165,7 @@ page DataMapDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-map-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataMap size="default" color="primary" title="Activity by team" description="Select a tile to inspect its activity score." items='[{"label":"Design","value":32},{"label":"Engineering","value":84},{"label":"Support","value":56},{"label":"Sales","value":45},{"label":"Marketing","value":68},{"label":"Operations","value":20}]' variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -216,7 +216,7 @@ page DataMapDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-map-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataMap size="default" color="primary" title="Activity by team" description="Select a tile to inspect its activity score." items='[{"label":"Design","value":32},{"label":"Engineering","value":84},{"label":"Support","value":56},{"label":"Sales","value":45},{"label":"Marketing","value":68},{"label":"Operations","value":20}]' variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -531,7 +531,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataTable size="default" columns="[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "status", "label": "Status", "align": "center"}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "TeLine truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Sortable, searchable and paged usage">
|
||||
@@ -738,7 +738,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataTable size="sm" columns="[{"key": "owner", "label": "From", "sortable": true}, {"key": "name", "label": "Subject", "sortable": true}, {"key": "plan", "label": "Folder", "align": "center"}, {"key": "statusHtml", "label": "State", "align": "center", "html": true}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "Team", "owner": "J. Dubois", "seats": 97, &quLine truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Bulk actions on selection usage">
|
||||
@@ -968,7 +968,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataTable size="lg" columns="[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "status", "label": "Status", "align": "center"}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "Team&quLine truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Numbered pagination usage">
|
||||
@@ -1176,7 +1176,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataTable size="lg" columns="[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "statusHtml", "label": "Status", "align": "center", "html": true}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", &quLine truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Full gridlines and custom cell markup usage">
|
||||
@@ -1386,7 +1386,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataTable size="lg" columns="[{"key": "name", "label": "Account", "sortable": true, "width": "40%"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true, "width": "20%"}, {"key": "plan", "label": "Plan", "align": "center", "width": "20%"}, {"key": "status", "label": "Status", "align": "end", "width": "20%"}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id":Line truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Fixed widths and alignment usage">
|
||||
@@ -1595,7 +1595,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataTable size="lg" columns="[{"key": "name", "label": "Plan"}, {"key": "plan", "label": "Tier"}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "type": "number"}, {"key": "status", "label": "Status", "align": "center"}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "Team", "owner": "J. Dubois", &qLine truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Comparison layout usage">
|
||||
@@ -1802,7 +1802,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataTable size="lg" columns="[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "status", "label": "Status", "align": "center"}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "Team&quLine truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Sticky first column usage">
|
||||
@@ -2010,7 +2010,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataTable size="lg" columns="[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "status", "label": "Status", "align": "center"}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "Team&quLine truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact density, no pagination usage">
|
||||
@@ -2221,7 +2221,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataTable size="lg" columns="[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "status", "label": "Status", "align": "center"}]" rows="[]" remote="false" loadingLabel="Advanced example" errorLabel="Advanced example" retryLabel="Advanced example" caption="Accounts" description="A richer configuration demonstrating additional content and hierarchy." searchable="true" searchPlaceholder="Enter a sample value" paginated="true" pageSize="35" pageSizes='[5,10,25]' selectable="false" actions='[]' striped="true" bordered="true" emptyLabel="No accounts match this filter yet" noResultsLabel="Advanced example" clearSearchLabel="Advanced example" stickyFirstColumn="false" class="showcase-instance showcase-instance--9" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Empty state usage">
|
||||
|
||||
@@ -264,7 +264,7 @@ page DatePickerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="date-picker-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DatePicker size="default" label="Start date" name="start-date" value="2026-09-20" placeholder="Enter a sample value" type="date" firstDayOfWeek="0" months='[{"label":"Jan","value":"01"},{"label":"Feb","value":"02"},{"label":"Mar","value":"03"},{"label":"Apr","value":"04"},{"label":"May","value":"05"},{"label":"Jun","value":"06"},{"label":"Jul","value":"07"},{"label":"Aug","value":"08"},{"label":"Sep","value":"09"},{"label":"Oct","value":"10"},{"label":"Nov","value":"11"},{"label":"Dec","value":"12"}]' days='[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]' years='[2024,2025,2026,2027,2028,2029,2030]' variant="normal" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Date picker usage">
|
||||
@@ -385,7 +385,7 @@ page DatePickerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="date-picker-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DatePicker size="sm" label="Schedule for" name="schedule" value="2026-09-20T09:30" placeholder="Enter a sample value" type="datetime-local" firstDayOfWeek="0" months='[{"label":"Jan","value":"01"},{"label":"Feb","value":"02"},{"label":"Mar","value":"03"},{"label":"Apr","value":"04"},{"label":"May","value":"05"},{"label":"Jun","value":"06"},{"label":"Jul","value":"07"},{"label":"Aug","value":"08"},{"label":"Sep","value":"09"},{"label":"Oct","value":"10"},{"label":"Nov","value":"11"},{"label":"Dec","value":"12"}]' days='[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]' years='[2024,2025,2026,2027,2028,2029,2030]' variant="secondary" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Date and time usage">
|
||||
@@ -509,7 +509,7 @@ page DatePickerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="date-picker-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DatePicker size="lg" label="Scheduled date" value="2026-09-22" placeholder="Search by name, email, or identifier" firstDayOfWeek="0" months='[{"label":"Jan","value":"01"},{"label":"Feb","value":"02"},{"label":"Mar","value":"03"},{"label":"Apr","value":"04"},{"label":"May","value":"05"},{"label":"Jun","value":"06"},{"label":"Jul","value":"07"},{"label":"Aug","value":"08"},{"label":"Sep","value":"09"},{"label":"Oct","value":"10"},{"label":"Nov","value":"11"},{"label":"Dec","value":"12"}]' days='[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]' years='[2024,2025,2026,2027,2028,2029,2030]' variant="success" inline="false" readonly="true" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled date usage">
|
||||
|
||||
@@ -286,7 +286,7 @@ page DeviceFrameDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="device-frame-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DeviceFrame size="default" 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"]}]' variant="default" frameTitle="Device Frame example" showToolbar="true" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -420,7 +420,7 @@ page DeviceFrameDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="device-frame-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><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" frameTitle="Compact Device Frame" showToolbar="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -556,7 +556,7 @@ page DeviceFrameDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="device-frame-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><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" frameTitle="Advanced Device Frame" showToolbar="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -37,7 +37,7 @@ page DividerDetail {
|
||||
/></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -56,7 +56,7 @@ page DividerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="divider-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Divider size="default" label="Related information" orientation="horizontal" variant="solid" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal section divider usage">
|
||||
@@ -75,7 +75,7 @@ page DividerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="divider-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Divider size="sm" label="" orientation="horizontal" variant="secondary" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Minimal unlabeled divider usage">
|
||||
@@ -95,7 +95,7 @@ page DividerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="divider-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Divider size="lg" color="info" label="Actions" orientation="vertical" variant="success" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Vertical toolbar divider usage">
|
||||
@@ -110,7 +110,7 @@ page DividerDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -90,7 +90,7 @@ page DragAndDropDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="drag-and-drop-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DragAndDrop size="default" color="primary" title="Project priorities" description="Drag to reorder, or use the arrow buttons." items='[{"label":"Review designs"},{"label":"Build the dashboard"},{"label":"Test accessibility"},{"label":"Prepare release notes"}]' variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -129,7 +129,7 @@ page DragAndDropDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="drag-and-drop-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DragAndDrop size="default" color="primary" title="Project priorities" description="Drag to reorder, or use the arrow buttons." items='[{"label":"Review designs"},{"label":"Build the dashboard"},{"label":"Test accessibility"},{"label":"Prepare release notes"}]' variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -168,7 +168,7 @@ page DragAndDropDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="drag-and-drop-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DragAndDrop size="default" color="primary" title="Project priorities" description="Drag to reorder, or use the arrow buttons." items='[{"label":"Review designs"},{"label":"Build the dashboard"},{"label":"Test accessibility"},{"label":"Prepare release notes"}]' variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -0,0 +1,132 @@
|
||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||
page DrawflowCanvasDetail {
|
||||
layout = "showcase"
|
||||
state playground_nodes = JSON.parse(ctx.url.searchParams.get("pg_nodes") ?? "[]")
|
||||
state playground_toolbar = (ctx.url.searchParams.get("pg_toolbar") ?? "true") === "true"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Drawflow Canvas"
|
||||
description = "Reusable drawflow canvas component."
|
||||
}
|
||||
view {
|
||||
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
|
||||
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/core">Core</a><span aria-hidden="true">/</span><span>Drawflow Canvas</span>
|
||||
</nav>
|
||||
<header class="detail-hero">
|
||||
<div class="detail-hero-copy">
|
||||
<span class="showcase-eyebrow">Core component</span>
|
||||
<h1>Drawflow Canvas</h1>
|
||||
<p>Reusable drawflow canvas component.</p>
|
||||
<div class="detail-badges"><span>3 props</span><span>0 slots</span><span>4 outputs</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
</div>
|
||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||
</header>
|
||||
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="DrawflowCanvas" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="select,connect,move,add">
|
||||
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Drawflow Canvas</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
|
||||
<div class="playground-workbench">
|
||||
<div class="playground-preview">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="playground-preview-source" data-playground-preview><DrawflowCanvas nodes='{playground_nodes}' toolbar='{playground_toolbar}' class='{playground_class}' /></div>
|
||||
<section class="playground-code" aria-label="Current component code">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||
<pre><code data-playground-code><DrawflowCanvas /></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>3 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-drawflow-canvas-nodes"><span><strong>nodes</strong><small>string</small></span><textarea id="playground-drawflow-canvas-nodes" name="pg_nodes" rows="5" spellcheck="false" data-playground-json></textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-drawflow-canvas-toolbar"><span><strong>toolbar</strong><small>boolean</small></span><input id="playground-drawflow-canvas-toolbar" name="pg_toolbar" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-drawflow-canvas-class"><span><strong>class</strong><small>string</small></span><input id="playground-drawflow-canvas-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<div class="detail-layout">
|
||||
<main class="detail-content">
|
||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
||||
<span class="demo-case-number">01</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="drawflow-canvas-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><DrawflowCanvas toolbar="true" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><DrawflowCanvas /></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
||||
<span class="demo-case-number">02</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="drawflow-canvas-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><DrawflowCanvas toolbar="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><DrawflowCanvas /></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
||||
<span class="demo-case-number">03</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="drawflow-canvas-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><DrawflowCanvas toolbar="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><DrawflowCanvas /></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component outputs</span><h2>Receive every typed component output</h2><p>Use declarative output handlers in <code>.wrn</code> files or register a direct output handler from JavaScript. The canonical API exposes <code>payload</code> and does not require <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@connect</code><span>Fires when the component emits the connect event.</span></div><div><code>@move</code><span>Fires when the component emits the move event.</span></div><div><code>@add</code><span>Fires when the component emits the add event.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code><DrawflowCanvas
|
||||
@select='console.log(payload)'
|
||||
@connect='console.log(payload)'
|
||||
@move='console.log(payload)'
|
||||
@add='console.log(payload)'
|
||||
/></code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Direct output handlers</span><small>.js</small></header><pre><code>import <span>{</span> registerOutputHandler <span>}</span> from "@wrnexus/csr/outputs"
|
||||
|
||||
const component = document.querySelector("[data-ui-component=\"DrawflowCanvas\"], [data-component=\"DrawflowCanvas\"]")
|
||||
|
||||
if (component) registerOutputHandler(component, "select", (payload) => <span>{</span>
|
||||
console.log("select", payload)
|
||||
<span>}</span>)
|
||||
|
||||
if (component) registerOutputHandler(component, "connect", (payload) => <span>{</span>
|
||||
console.log("connect", payload)
|
||||
<span>}</span>)
|
||||
|
||||
if (component) registerOutputHandler(component, "move", (payload) => <span>{</span>
|
||||
console.log("move", payload)
|
||||
<span>}</span>)
|
||||
|
||||
if (component) registerOutputHandler(component, "add", (payload) => <span>{</span>
|
||||
console.log("add", payload)
|
||||
<span>}</span>)</code></pre></section></div></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>nodes</code></td><td>string</td><td><code>[] palette=[] activeNode="" label="Workflow" arrangeLabel="Arrange nodes" connectLabel="Connect" color="primary" size="default"</code></td><td>No</td></tr><tr><td><code>toolbar</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#drawflow-canvas-demo-1">Production default</a><a href="#drawflow-canvas-demo-2">Compact application</a><a href="#drawflow-canvas-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<span></span>
|
||||
<a href="/components/flow-canvas"><small>Next</small><strong>Flow Canvas →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
@@ -73,7 +73,7 @@ page FileInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="file-input-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><FileInput size="default" name="attachment" label="Attachment" hiddenLabel="false" placeholder="Choose a file" value="" icon="" accept=".pdf,image/*" multiple="false" helperText="PDF or image" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Choose a document usage">
|
||||
@@ -95,7 +95,7 @@ page FileInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="file-input-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><FileInput size="sm" name="attachments" label="Attachments" hiddenLabel="false" placeholder="Choose files" value="" icon="icon-[lucide--arrow-right]" multiple="true" inline="false" variant="secondary" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Multiple attachments usage">
|
||||
@@ -120,7 +120,7 @@ page FileInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="file-input-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><FileInput size="lg" name="disabled-file" label="Attachment" hiddenLabel="false" placeholder="Uploads unavailable" value="" icon="icon-[lucide--trash-2]" multiple="false" inline="false" variant="success" readonly="false" disabled="true" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled upload usage">
|
||||
|
||||
@@ -67,7 +67,7 @@ page FileUploadProgressDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="file-upload-progress-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><FileUploadProgress size="default" color="primary" label="Upload progress" value="50" max="100" showValue="true" fileName="brand-guidelines.pdf" fileSize="4.8 MB" uploadedSize="2.4 MB" status="uploading" cancelLabel="Cancel upload" retryLabel="Retry upload" showCompleteAction="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -89,7 +89,7 @@ page FileUploadProgressDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="file-upload-progress-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><FileUploadProgress size="default" color="primary" label="Upload progress" value="50" max="100" showValue="true" fileName="brand-guidelines.pdf" fileSize="4.8 MB" uploadedSize="" status="error" cancelLabel="Cancel upload" retryLabel="Retry upload" showCompleteAction="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -111,7 +111,7 @@ page FileUploadProgressDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="file-upload-progress-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><FileUploadProgress size="default" color="primary" label="Upload progress" value="100" max="100" showValue="true" fileName="brand-guidelines.pdf" fileSize="4.8 MB" uploadedSize="" status="complete" cancelLabel="Cancel upload" retryLabel="Retry upload" showCompleteAction="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
@@ -36,7 +36,7 @@ page GridDetail {
|
||||
<pre><code data-playground-code><Grid /></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -55,7 +55,7 @@ page GridDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="grid-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Grid size="default" columns="3" gap="md" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div></Grid></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Responsive three-column grid usage">
|
||||
@@ -75,7 +75,7 @@ page GridDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="grid-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Grid size="compact" columns="4" gap="sm" maxWidth="wide" class="showcase-instance showcase-instance--2"><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span><span>Four</span></div></Grid></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Dense four-column grid usage">
|
||||
@@ -98,7 +98,7 @@ page GridDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="grid-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Grid size="spacious" columns="2" gap="xl" maxWidth="full" class="showcase-instance showcase-instance--3"><div class="showcase-grid-items"><span>Primary</span><span>Secondary</span></div></Grid></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Full-width two-column grid usage">
|
||||
@@ -112,7 +112,7 @@ page GridDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>minItemWidth</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -39,7 +39,7 @@ page ImageDetail {
|
||||
<pre><code data-playground-code><Image /></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>10 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -58,7 +58,7 @@ page ImageDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="image-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Image size="default" src="/showcase-images/violet-circle.svg" alt="Abstract violet circle on a dark surface" width="800" height="450" rounded="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Responsive content image usage">
|
||||
@@ -80,7 +80,7 @@ page ImageDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="image-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Image size="sm" src="/showcase-images/blue-mountain.svg" alt="Abstract blue thumbnail" width="400" height="400" rounded="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rounded thumbnail usage">
|
||||
@@ -104,7 +104,7 @@ page ImageDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="image-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Image size="lg" src="/showcase-images/green-hero.svg" alt="Abstract green hero visual" width="1200" height="600" loading="eager" rounded="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Eager hero image usage">
|
||||
@@ -121,7 +121,7 @@ page ImageDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>src</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>alt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>width</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>height</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>string</td><td><code>"lazy"</code></td><td>No</td></tr><tr><td><code>fit</code></td><td>string</td><td><code>"cover"</code></td><td>No</td></tr><tr><td><code>rounded</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -77,7 +77,7 @@ page InputGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-group-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputGroup size="default" color="primary" id="" name="workspace-url" label="Workspace address" hiddenLabel="false" value="" placeholder="your-team" type="text" startText="https://" endText=".example.com" icon="" iconPosition="start" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -100,7 +100,7 @@ page InputGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-group-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputGroup size="default" color="primary" id="" name="workspace-url" label="Workspace address" hiddenLabel="false" value="" placeholder="your-team" type="text" startText="" endText="" icon="icon-[lucide--search]" iconPosition="start" actionLabel="Search" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -123,7 +123,7 @@ page InputGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-group-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputGroup size="default" color="primary" id="" name="workspace-url" label="Workspace address" hiddenLabel="false" value="" placeholder="your-team" type="text" startText="" endText="" icon="" iconPosition="start" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -94,7 +94,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" variant="default" name="default-quantity" value="1" min="0" max="99" step="1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Default controls usage">
|
||||
@@ -117,7 +117,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" variant="labeled" name="labeled-quantity" value="1" min="1" max="25" step="1" label="Select quantity" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Labeled input style usage">
|
||||
@@ -142,7 +142,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" variant="vertical" name="vertical-quantity" value="1" min="0" max="20" label="Select quantity" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Vertical buttons usage">
|
||||
@@ -167,7 +167,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" variant="horizontal" name="horizontal-quantity" value="1" min="0" max="20" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal buttons usage">
|
||||
@@ -191,7 +191,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="sm" color="primary" variant="compact" name="compact-quantity" value="0" min="0" max="10" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact size usage">
|
||||
@@ -214,7 +214,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" variant="seat" name="additional-seats" value="0" min="0" max="50" label="Additional seats" description="$39 monthly" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Seat quantity selector usage">
|
||||
@@ -239,7 +239,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" name="disabled-input" value="10" inputDisabled="true" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled input usage">
|
||||
@@ -261,7 +261,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" name="disabled-buttons" value="10" buttonsDisabled="true" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled buttons usage">
|
||||
@@ -283,7 +283,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" name="custom-step" value="0" min="0" max="20" step="2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Custom step size usage">
|
||||
@@ -306,7 +306,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-10" class="demo-canvas demo-canvas--10">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" name="negative-values" value="-10" min="-100" max="100" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Negative values usage">
|
||||
@@ -329,7 +329,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-11" class="demo-canvas demo-canvas--11">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" name="maximum-limit" value="10" min="0" max="10" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Maximum limit usage">
|
||||
@@ -352,7 +352,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-12" class="demo-canvas demo-canvas--12">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" name="invalid-quantity" value="10" min="0" max="5" error="Out of limit" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Validation states usage">
|
||||
|
||||
@@ -80,7 +80,7 @@ page InputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Input size="default" label="Input" hiddenLabel="false" placeholder="Enter a sample value" value="sample-1" variant="normal" icon="" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -100,7 +100,7 @@ page InputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Input size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" value="sample-2" variant="secondary" icon="icon-[lucide--arrow-right]" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -124,7 +124,7 @@ page InputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Input size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" value="sample-3" variant="success" icon="icon-[lucide--trash-2]" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -35,7 +35,7 @@ page KbdDetail {
|
||||
/></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>4 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -54,7 +54,7 @@ page KbdDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="kbd-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Kbd size="default" color="primary" label="⌘ K" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -73,7 +73,7 @@ page KbdDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="kbd-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Kbd size="default" color="primary" label="Esc" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -92,7 +92,7 @@ page KbdDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="kbd-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Kbd size="default" color="primary" label="Ctrl + Enter" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
@@ -103,7 +103,7 @@ page KbdDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"K"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -63,7 +63,7 @@ page LayoutSplitterDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="layout-splitter-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><LayoutSplitter size="40" orientation="horizontal" minSize="20" step="5" label="Resize panels" class="showcase-instance showcase-instance--1"><div data-slot="start"><h3>Project files</h3><p>Drag the divider to resize these panels.</p></div><div data-slot="end"><h3>Editor</h3><p>Your selected file appears here.</p></div></LayoutSplitter></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Drag or arrow the divider usage">
|
||||
@@ -89,7 +89,7 @@ page LayoutSplitterDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="layout-splitter-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><LayoutSplitter size="60" orientation="vertical" minSize="25" step="10" label="Resize rows" class="showcase-instance showcase-instance--2"><div data-slot="start"><h3>Project files</h3><p>Drag the divider to resize these panels.</p></div><div data-slot="end"><h3>Editor</h3><p>Your selected file appears here.</p></div></LayoutSplitter></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Stacked panes usage">
|
||||
|
||||
@@ -278,7 +278,7 @@ page LegendIndicatorDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="legend-indicator-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><LegendIndicator size="default" title="Traffic sources" description="Select a source to toggle its visibility." items='[{"label":"Direct","color":"#8b5cf6","value":"42%"},{"label":"Search","color":"#14b8a6","value":"35%"},{"label":"Referral","color":"#f59e0b","value":"23%"}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Chart legend usage">
|
||||
|
||||
@@ -40,7 +40,7 @@ page LinkDetail {
|
||||
/></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>9 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -59,7 +59,7 @@ page LinkDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="link-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Link size="default" label="Open components" href="/base" external="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Standard navigation link usage">
|
||||
@@ -79,7 +79,7 @@ page LinkDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="link-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Link size="sm" label="WRNexusJS documentation" href="https://wrnexusjs.dev" target="_blank" external="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="External resource link usage">
|
||||
@@ -102,7 +102,7 @@ page LinkDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="link-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Link size="lg" color="info" label="Explore framework guides" href="/framework-guides" external="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Large emphasized link usage">
|
||||
@@ -116,7 +116,7 @@ page LinkDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Link"</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>"#"</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>underline</code></td><td>string</td><td><code>"hover"</code></td><td>No</td></tr><tr><td><code>external</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -105,7 +105,7 @@ page ListGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="list-group-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ListGroup size="default" color="primary" title="Workspace" description="" items='[{"value":"inbox","label":"Inbox","description":"Messages that need your attention","icon":"icon-[lucide--inbox]","badge":"8"},{"value":"projects","label":"Projects","description":"Your team\u0027s active work","icon":"icon-[lucide--folder]"},{"value":"archive","label":"Archive","description":"Completed conversations","icon":"icon-[lucide--archive]"}]' variant="default" value="inbox" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -151,7 +151,7 @@ page ListGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="list-group-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ListGroup size="default" color="primary" title="Workspace" description="" items='[{"value":"inbox","label":"Inbox","description":"Messages that need your attention","icon":"icon-[lucide--inbox]","badge":"8"},{"value":"projects","label":"Projects","description":"Your team\u0027s active work","icon":"icon-[lucide--folder]"},{"value":"archive","label":"Archive","description":"Completed conversations","icon":"icon-[lucide--archive]"}]' variant="default" value="inbox" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -197,7 +197,7 @@ page ListGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="list-group-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ListGroup size="default" color="primary" title="Workspace" description="" items='[{"value":"inbox","label":"Inbox","description":"Messages that need your attention","icon":"icon-[lucide--inbox]","badge":"8"},{"value":"projects","label":"Projects","description":"Your team\u0027s active work","icon":"icon-[lucide--folder]"},{"value":"archive","label":"Archive","description":"Completed conversations","icon":"icon-[lucide--archive]"}]' variant="default" value="inbox" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -278,7 +278,7 @@ page ListDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="list-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><List size="default" title="Citizen resources" description="Commonly requested public information." items='[{"label":"Report crime","href":"#report","icon":"icon-[lucide--shield-alert]"},{"label":"Track complaint","href":"#track","icon":"icon-[lucide--scan-search]"},{"label":"Certificates","href":"#certificates","icon":"icon-[lucide--file-check-2]"}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Linked resource list usage">
|
||||
@@ -320,7 +320,7 @@ page ListDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="list-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><List size="sm" title="Current status" description="A compact configuration for dashboards and dense product surfaces." items='[{"label":"Application received","status":"Complete"},{"label":"Verification","status":"In progress"},{"label":"Decision","status":"Pending"}]' variant="soft" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact status list usage">
|
||||
@@ -361,7 +361,7 @@ page ListDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="list-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><List size="lg" title="Service requests" description="Recent requests and their current status." items='[{"label":"Address verification","description":"Submitted yesterday","status":"Review","href":"#request-1"},{"label":"Character certificate","description":"Submitted 3 days ago","status":"Approved","href":"#request-2"}]' variant="raised" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich action list usage">
|
||||
|
||||
@@ -180,7 +180,7 @@ page MapDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="map-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Map size="default" title="Bengaluru" description="Pan and zoom to explore the city" items='[]' variant="default" provider="openstreetmap" latitude="12.9716" longitude="77.5946" zoomLevel="13" imageSrc="" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="OpenStreetMap usage">
|
||||
@@ -206,7 +206,7 @@ page MapDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="map-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Map size="sm" title="Google Maps" description="A compact configuration for dashboards and dense product surfaces." items='[]' variant="secondary" provider="google" apiKey="" query="Bengaluru" latitude="12.9716" longitude="77.5946" zoomLevel="13" imageSrc="" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Google Maps usage">
|
||||
|
||||
@@ -278,7 +278,7 @@ page MarqueeDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="marquee-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Marquee size="default" title="Supported capabilities" description="A polished default marquee for a modern application." items='[{"label":"SSR"},{"label":"CSR"},{"label":"Themes"},{"label":"Accessibility"},{"label":"Responsive UI"}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Partner and capability strip usage">
|
||||
@@ -320,7 +320,7 @@ page MarqueeDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="marquee-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Marquee size="sm" title="Compact Marquee" description="A compact configuration for dashboards and dense product surfaces." items='[{"label":"All services operational"},{"label":"New components published"},{"label":"Documentation updated"}]' variant="soft" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact announcement ticker usage">
|
||||
@@ -358,7 +358,7 @@ page MarqueeDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="marquee-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Marquee size="lg" color="info" title="Built for complete digital platforms" description="A richer configuration demonstrating additional content and hierarchy." items='[{"label":"Public portals","icon":"icon-[lucide--landmark]"},{"label":"Enterprise systems","icon":"icon-[lucide--building-2]"},{"label":"Developer tools","icon":"icon-[lucide--code-2]"}]' variant="raised" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Large visual marquee usage">
|
||||
|
||||
@@ -617,7 +617,7 @@ page MegaMenuDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="mega-menu-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><MegaMenu size="default" label="Products" icon="icon-[lucide--box]" columns='[{"heading":"Platform","items":[{"label":"Runtime","href":"/runtime","description":"The browser half of the framework."},{"label":"Compiler","href":"/compiler","description":"WRN to JavaScript."}]},{"heading":"Tooling","items":[{"label":"CLI","href":"/cli","description":"Scaffold, build and deploy."},{"label":"Editor","href":"/editor","description":"Language server and syntax."}]}]' rail='[{"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"]}]' featured='{demo_obj_0}' variant="default" columnCount="3" fullWidth="false" openOnHover="true" actionLabel="Mega Menu" actionHref="#mega-menu-demo" defaultOpen="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Grouped columns usage">
|
||||
@@ -839,7 +839,7 @@ page MegaMenuDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="mega-menu-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><MegaMenu size="sm" label="Solutions" icon="icon-[lucide--arrow-right]" columns='[{"heading":"By team","items":[{"label":"Engineering","href":"/eng","icon":"icon-[lucide--code]"},{"label":"Design","href":"/design","icon":"icon-[lucide--palette]"},{"label":"Support","href":"/support","icon":"icon-[lucide--life-buoy]"}]},{"heading":"By size","items":[{"label":"Startup","href":"/startup"},{"label":"Enterprise","href":"/enterprise"}]}]' rail='[{"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"]}]' featured='{demo_obj_1}' variant="secondary" columnCount="7" fullWidth="false" openOnHover="true" actionLabel="Compact example" actionHref="#mega-menu-demo" footer="Not sure where to start? Talk to us." defaultOpen="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="With a footer note usage">
|
||||
|
||||
@@ -88,7 +88,7 @@ page MetricCardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="metric-card-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><MetricCard label="Availability" value="99.9" description="Target service availability." icon="icon-[lucide--activity]" suffix="%" trend="Stable" trendLabel="30 days" trendDirection="positive" progress="-1" progressLabel="Metric Card" href="#status" external="false" actionLabel="Open status" showArrow="true" selectable="false" disabled="false" size="default" color="success" variant="default" align="start" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Operational KPI usage">
|
||||
@@ -122,7 +122,7 @@ page MetricCardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="metric-card-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><MetricCard label="Profile completion" value="72" description="Complete the remaining account and security steps." icon="icon-[lucide--circle-user-round]" suffix="%" trendLabel="Compact example" progress="72" progressLabel="Account setup" href="#metric-card-demo" external="false" actionLabel="Compact example" showArrow="true" selectable="false" disabled="false" size="sm" color="info" variant="soft" align="center" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Progress metric usage">
|
||||
@@ -157,7 +157,7 @@ page MetricCardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="metric-card-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><MetricCard label="Open complaints" value="38" description="Cases waiting for review or assignment." icon="icon-[lucide--inbox]" badge="Needs review" trendLabel="Advanced example" progress="-1" progressLabel="Advanced example" href="#queue" external="false" actionLabel="Review queue" showArrow="true" selectable="true" disabled="false" size="lg" color="warning" variant="raised" hover="glow" align="end" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Selectable dashboard metric usage">
|
||||
|
||||
@@ -280,7 +280,7 @@ page NavDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="nav-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Nav size="default" items='[{"label":"Home","href":"/","value":"home","icon":"icon-[lucide--house]"},{"label":"Inbox","href":"/inbox","value":"inbox","badge":"9"},{"label":"Reports","href":"/reports","value":"reports"},{"label":"Archive","href":"/archive","value":"archive","disabled":true}]' active="inbox" label="Nav" collapsible="true" toggleLabel="Nav" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal links usage">
|
||||
@@ -331,7 +331,7 @@ page NavDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="nav-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Nav size="sm" items='[{"label":"Home","href":"/","value":"home"},{"label":"Products","value":"products","items":[{"label":"Overview","href":"/p","value":"p-overview"},{"label":"Platform","value":"p-platform","items":[{"label":"Runtime","href":"/p/runtime","value":"runtime"},{"label":"Compiler","href":"/p/compiler","value":"compiler"}]}]}]' active="p-overview" label="Compact example" collapsible="true" toggleLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Nested submenus usage">
|
||||
@@ -392,7 +392,7 @@ page NavDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="nav-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Nav size="lg" items='[{"label":"Dashboard","href":"/","value":"dash","icon":"icon-[lucide--gauge]"},{"label":"Team","href":"/team","value":"team","icon":"icon-[lucide--users]"},{"label":"Settings","href":"/settings","value":"settings","icon":"icon-[lucide--settings]"}]' active="team" orientation="vertical" label="Advanced example" collapsible="false" toggleLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Vertical rail usage">
|
||||
|
||||
@@ -630,7 +630,7 @@ page NavbarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="navbar-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Navbar size="default" label="Primary navigation" topbarLabel="Navbar" brand='{demo_obj_0}' items='[{"label":"Overview","href":"/","value":"overview"},{"label":"Projects","href":"/projects","value":"projects"},{"label":"Reports","href":"/reports","value":"reports"}]' actions='[{"label":"Sign in","href":"/login","variant":"link"},{"label":"Start free","href":"/signup","variant":"primary"}]' active="projects" sticky="false" floating="false" openOnHover="false" mobileLabel="Navbar" flushMobile="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Brand, links and actions usage">
|
||||
@@ -703,7 +703,7 @@ page NavbarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="navbar-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Navbar size="sm" label="Compact example" topbarLabel="Compact example" brand='{demo_obj_1}' items='[{"label":"Overview","href":"/","value":"overview"},{"label":"Products","value":"products","columns":2,"description":"Everything in the platform.","children":[{"label":"Platform","children":[{"label":"Runtime","href":"/runtime","description":"The browser half.","icon":"icon-[lucide--cpu]"},{"label":"Compiler","href":"/compiler","description":"WRN to JavaScript.","icon":"icon-[lucide--hammer]"}]},{"label":"Tooling","children":[{"label":"CLI","href":"/cli","description":"Scaffold and deploy."},{"label":"Editor","href":"/editor","description":"Language server."}]}]},{"label":"Pricing","href":"/pricing","value":"pricing"}]' actions='[{"label":"Book a demo","href":"/demo","variant":"primary"}]' active="overview" sticky="false" floating="false" openOnHover="false" mobileLabel="Compact example" flushMobile="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Dropdown and mega panel usage">
|
||||
@@ -808,7 +808,7 @@ page NavbarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="navbar-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Navbar size="sm" label="Advanced example" topbarLabel="Advanced example" brand='{demo_obj_2}' items='[{"label":"Docs","href":"/docs","value":"docs"},{"label":"Support","href":"/support","value":"support"}]' actions='[{"label":"Dashboard","href":"/app","variant":"primary"}]' active="docs" sticky="true" floating="false" openOnHover="false" mobileLabel="Toggle navigation" flushMobile="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Sticky and compact usage">
|
||||
|
||||
@@ -61,7 +61,7 @@ page PaginationDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pagination-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Pagination color="primary" size="default" page="2" pageSize="10" total="137" variant="compact" siblingCount="1" showSummary="true" label="Pagination" previousLabel="Previous" nextLabel="Next" hrefTemplate="" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact arrows usage">
|
||||
@@ -81,7 +81,7 @@ page PaginationDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pagination-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Pagination color="primary" size="default" page="5" pageSize="10" total="200" variant="numbered" siblingCount="1" showSummary="true" label="Pagination" previousLabel="Previous" nextLabel="Next" hrefTemplate="" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Numbered pages usage">
|
||||
@@ -102,7 +102,7 @@ page PaginationDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pagination-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Pagination color="primary" size="default" page="8" pageSize="25" total="900" variant="numbered" siblingCount="2" showSummary="true" label="Pagination" previousLabel="Previous" nextLabel="Next" hrefTemplate="" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Wider window usage">
|
||||
|
||||
@@ -77,7 +77,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Default four-digit PIN" name="pin-input-1" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Default four-digit PIN usage">
|
||||
@@ -97,7 +97,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><div class="pin-length-demo"><PinInput size="default" label="3-digit code" name="pin-length-3" value="" length="3" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /><PinInput size="default" label="5-digit code" name="pin-length-5" value="" length="5" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /><PinInput size="default" label="7-digit code" name="pin-length-7" value="" length="7" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Different lengths usage">
|
||||
@@ -130,7 +130,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Pre-filled verification code" name="pin-input-3" value="482915" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Pre-filled verification code usage">
|
||||
@@ -152,7 +152,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Masked security PIN" name="pin-input-4" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="true" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Masked security PIN usage">
|
||||
@@ -173,7 +173,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Alphanumeric regex" name="pin-input-5" value="" length="6" pattern="[A-Z0-9]" inputMode="text" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Alphanumeric regex usage">
|
||||
@@ -196,7 +196,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Grouped code with separator" name="pin-input-6" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="–" groupSize="3" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Grouped code with separator usage">
|
||||
@@ -219,7 +219,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Paste from clipboard" name="pin-input-7" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Paste from clipboard usage">
|
||||
@@ -240,7 +240,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Disabled PIN input" name="pin-input-8" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="true" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled PIN input usage">
|
||||
@@ -262,7 +262,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Read-only code" name="pin-input-9" value="739204" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="true" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Read-only code usage">
|
||||
@@ -285,7 +285,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-10" class="demo-canvas demo-canvas--10">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><form data-schema="pin-input-validation" class="demo-validation-form"><PinInput size="default" label="Validation state" name="pin-input-10" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="true" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /><button type="submit" class="wrn-btn wrn-btn--variant-default">Validate selection</button></form></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Validation state usage">
|
||||
@@ -307,7 +307,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-11" class="demo-canvas demo-canvas--11">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Supporting help text" name="pin-input-11" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="Enter the code sent to your registered email address." invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Supporting help text usage">
|
||||
@@ -329,7 +329,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-12" class="demo-canvas demo-canvas--12">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="lg" label="Large PIN cells" name="pin-input-12" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Large PIN cells usage">
|
||||
@@ -351,7 +351,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-13" class="demo-canvas demo-canvas--13">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Custom placeholder" name="pin-input-13" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="•" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Custom placeholder usage">
|
||||
@@ -373,7 +373,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-14" class="demo-canvas demo-canvas--14">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Automatic form submission" name="pin-input-14" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="true" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Automatic form submission usage">
|
||||
@@ -395,7 +395,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-15" class="demo-canvas demo-canvas--15">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Completion events" name="pin-input-15" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Completion events usage">
|
||||
@@ -416,7 +416,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-16" class="demo-canvas demo-canvas--16">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="JavaScript methods" name="pin-input-16" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="JavaScript methods usage">
|
||||
|
||||
@@ -69,7 +69,7 @@ page PreferenceSwitcherDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="preference-switcher-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PreferenceSwitcher size="default" themeLabel="Preference Switcher" colorLabel="Preference Switcher" languageLabel="Preference Switcher" compact="false" iconOnly="true" showCurrentLanguage="true" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -91,7 +91,7 @@ page PreferenceSwitcherDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="preference-switcher-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PreferenceSwitcher size="sm" themeLabel="Compact example" colorLabel="Compact example" languageLabel="Compact example" compact="true" iconOnly="true" showCurrentLanguage="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -113,7 +113,7 @@ page PreferenceSwitcherDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="preference-switcher-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PreferenceSwitcher size="lg" themeLabel="Advanced example" colorLabel="Advanced example" languageLabel="Advanced example" compact="false" iconOnly="true" showCurrentLanguage="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
@@ -154,7 +154,7 @@ if (component) registerOutputHandler(component, "language", (payload) => <spa
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<span></span>
|
||||
<a href="/components/flow-canvas"><small>Previous</small><strong>← Flow Canvas</strong></a>
|
||||
<a href="/components/toaster"><small>Next</small><strong>Toaster →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
|
||||
@@ -38,7 +38,7 @@ page ProgressDetail {
|
||||
/></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -57,7 +57,7 @@ page ProgressDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="progress-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Progress size="default" label="Progress" value="36" max="100" showValue="true" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -76,7 +76,7 @@ page ProgressDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="progress-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Progress size="sm" label="Compact example" value="60" max="100" showValue="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -97,7 +97,7 @@ page ProgressDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="progress-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Progress size="lg" label="Advanced example" value="84" max="100" showValue="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
@@ -110,7 +110,7 @@ page ProgressDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Progress"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>50</code></td><td>No</td></tr><tr><td><code>max</code></td><td>number</td><td><code>100</code></td><td>No</td></tr><tr><td><code>showValue</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -296,7 +296,7 @@ page RadioDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="radio-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Radio size="default" label="Radio" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" options='[{"id":"radio-0-1","key":"radio-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":"#radio-demo","actionHref":"#radio-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":"radio-0-2","key":"radio-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#radio-demo","actionHref":"#radio-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"]}]' checked="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -429,7 +429,7 @@ page RadioDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="radio-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Radio size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" value="sample-2" options='[{"id":"radio-1-1","key":"radio-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":"#radio-demo","actionHref":"#radio-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":"radio-1-2","key":"radio-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#radio-demo","actionHref":"#radio-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"]}]' checked="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -566,7 +566,7 @@ page RadioDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="radio-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Radio size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" value="sample-3" options='[{"id":"radio-2-1","key":"radio-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":"#radio-demo","actionHref":"#radio-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":"radio-2-2","key":"radio-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":"#radio-demo","actionHref":"#radio-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"]}]' checked="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -84,7 +84,7 @@ page RangeSliderDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="range-slider-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><RangeSlider size="default" color="primary" id="" name="volume" label="Scale" hiddenLabel="false" placeholder="" variant="normal" icon="" iconPosition="start" value="2.4" min="0" max="5" step="0.2" showValue="true" showBounds="true" showSteps="false" marks='[]' helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Fractional steps usage">
|
||||
|
||||
@@ -69,7 +69,7 @@ page RatingDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="rating-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Rating size="default" color="primary" title="Rate your experience" description="" items='[]' variant="default" value="3" max="5" step="1" readonly="false" disabled="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Whole stars usage">
|
||||
@@ -95,7 +95,7 @@ page RatingDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="rating-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Rating size="default" color="primary" title="Half-star rating" description="" items='[]' variant="default" value="3.5" max="5" step="0.5" readonly="false" disabled="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Half stars usage">
|
||||
@@ -122,7 +122,7 @@ page RatingDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="rating-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Rating size="default" color="primary" title="Detailed score" description="" items='[]' variant="default" value="4.2" max="5" step="0.2" readonly="true" disabled="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Fine increments usage">
|
||||
|
||||
@@ -281,7 +281,7 @@ page ScrollspyDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="scrollspy-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><div class="showcase-spy-doc"><section id="overview" class="showcase-spy-section"><h3>Overview</h3><p>Scroll this page and watch the marker in the list move. The runtime observes these sections against the viewport, so the current link follows whatever you are reading.</p></section><section id="installation" class="showcase-spy-section"><h3>Installation</h3><p>Each link points at one of these ids. Nothing is connected up by hand -- the component only renders the links, and the runtime moves aria-current.</p></section><section id="usage" class="showcase-spy-section"><h3>Usage</h3><p>The active link is marked with aria-current="location", which is what a screen reader announces, and styled through data-active.</p></section><section id="api" class="showcase-spy-section"><h3>API</h3><p>Clicking a link jumps to its section and marks it immediately, so the control responds even before the scroll settles.</p></section></div><Scrollspy size="default" items='[{"label":"Overview","href":"#overview"},{"label":"Installation","href":"#installation"},{"label":"Usage","href":"#usage"},{"label":"API","href":"#api"}]' active="#overview" label="Scrollspy" heading="On this page" sticky="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Follows the reader usage">
|
||||
@@ -325,7 +325,7 @@ page ScrollspyDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="scrollspy-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Scrollspy size="sm" items='[{"label":"Overview","href":"#overview"},{"label":"Installation","href":"#installation"},{"label":"Usage","href":"#usage"}]' active="#installation" label="Compact example" heading="Sections" sticky="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact rail usage">
|
||||
|
||||
@@ -64,7 +64,7 @@ page SearchBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="search-box-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><SearchBox size="default" label="Search documentation" name="site-search" value="sample-1" placeholder="Search components and guides" type="search" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Site search usage">
|
||||
@@ -86,7 +86,7 @@ page SearchBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="search-box-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><SearchBox size="sm" label="Search stations" name="station-search" value="sample-2" placeholder="Name, district, or jurisdiction" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact directory search usage">
|
||||
@@ -109,7 +109,7 @@ page SearchBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="search-box-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><SearchBox size="lg" color="info" label="Complaint reference" name="complaint-reference" value="sample-3" placeholder="Enter reference number" disabled="false" required="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Required service lookup usage">
|
||||
|
||||
@@ -41,7 +41,7 @@ page SectionDetail {
|
||||
</Section></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>10 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -60,7 +60,7 @@ page SectionDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="section-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Section id="standard-section" size="default" variant="grid" spacing="lg" maxWidth="xl" fullWidth="false" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Standard section content</div></Section></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Standard content section usage">
|
||||
@@ -81,7 +81,7 @@ page SectionDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="section-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Section id="compact-section" size="sm" variant="soft" spacing="sm" maxWidth="wide" fullWidth="false" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--2"><div class="showcase-content-block">Compact dashboard content</div></Section></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact dashboard section usage">
|
||||
@@ -105,7 +105,7 @@ page SectionDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="section-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Section id="full-section" size="lg" variant="solid" maxWidth="full" fullWidth="true" borderTop="true" borderBottom="true" class="showcase-instance showcase-instance--3"><div class="showcase-content-block">Full-width public page section</div></Section></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Full-width surface section usage">
|
||||
@@ -123,7 +123,7 @@ page SectionDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>spacing</code></td><td>string</td><td><code>"lg"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>fullWidth</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>borderTop</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>borderBottom</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -509,7 +509,7 @@ page SelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="select-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Select size="default" label="Select" hiddenLabel="false" value="sample-1" values='[{"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"]}]' 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" variant="normal" icon="" inline="false" multiple="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -751,7 +751,7 @@ page SelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="select-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Select size="sm" label="Compact example" hiddenLabel="false" value="sample-2" values='[{"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"]}]' 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" variant="secondary" icon="icon-[lucide--arrow-right]" inline="false" multiple="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -997,7 +997,7 @@ page SelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="select-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Select size="lg" label="Advanced example" hiddenLabel="false" value="sample-3" values='[{"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"]}]' 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" variant="success" icon="icon-[lucide--trash-2]" inline="false" multiple="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -284,7 +284,7 @@ page SidebarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="sidebar-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Sidebar size="default" label="Workspace" items='[{"label":"Dashboard","href":"/","value":"dash","icon":"icon-[lucide--gauge]"},{"heading":"Projects","items":[{"label":"Active","href":"/active","value":"active","badge":"4"},{"label":"Archive","value":"archive","items":[{"label":"2025","href":"/a/2025","value":"a2025"},{"label":"2024","href":"/a/2024","value":"a2024"}]}]},{"heading":"Account","items":[{"label":"Settings","href":"/settings","value":"settings","icon":"icon-[lucide--settings]"}]}]' active="active" mobileLabel="Sidebar" drawerTitle="Sidebar example" mobile="true" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Groups and nested levels usage">
|
||||
@@ -360,7 +360,7 @@ page SidebarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="sidebar-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Sidebar size="sm" label="Operations" items='[{"label":"Queue","href":"/queue","value":"queue","icon":"icon-[lucide--inbox]"},{"label":"Reports","href":"/reports","value":"reports","icon":"icon-[lucide--chart-no-axes-column]"}]' active="queue" mobileLabel="Open navigation" drawerTitle="Operations" mobile="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Drawer on small screens usage">
|
||||
|
||||
@@ -36,7 +36,7 @@ page SkeletonDetail {
|
||||
/></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>5 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -55,7 +55,7 @@ page SkeletonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="skeleton-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Skeleton label="Skeleton" size="md" lines="3" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -74,7 +74,7 @@ page SkeletonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="skeleton-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Skeleton label="Compact example" size="sm" lines="3" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -94,7 +94,7 @@ page SkeletonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="skeleton-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Skeleton label="Advanced example" size="lg" lines="3" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
@@ -106,7 +106,7 @@ page SkeletonDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Loading"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>lines</code></td><td>number</td><td><code>3</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -36,7 +36,7 @@ page SpinnerDetail {
|
||||
/></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>5 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -55,7 +55,7 @@ page SpinnerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="spinner-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Spinner label="Spinner" size="md" lines="3" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -74,7 +74,7 @@ page SpinnerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="spinner-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Spinner label="Compact example" size="sm" lines="3" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -94,7 +94,7 @@ page SpinnerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="spinner-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Spinner label="Advanced example" size="lg" lines="3" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
@@ -106,7 +106,7 @@ page SpinnerDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Loading"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>lines</code></td><td>number</td><td><code>3</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -298,7 +298,7 @@ page StepperDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="stepper-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Stepper size="default" steps='[{"label":"Account","description":"Your details"},{"label":"Billing","description":"Payment method"},{"label":"Confirm","description":"Review and submit"}]' active="1" controlled="false" clickable="false" label="Stepper" showPanel="false" controls="false" allowSkip="false" nextDisabled="false" backLabel="Back" nextLabel="Next" skipLabel="Skip" finishLabel="Finish" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal progress usage">
|
||||
@@ -343,7 +343,7 @@ page StepperDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="stepper-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Stepper size="sm" steps='[{"label":"Cloned","icon":"icon-[lucide--git-branch]"},{"label":"Built","icon":"icon-[lucide--hammer]"},{"label":"Deployed","icon":"icon-[lucide--rocket]"}]' active="2" controlled="false" orientation="vertical" clickable="false" label="Compact example" showPanel="false" controls="false" allowSkip="false" nextDisabled="false" backLabel="Back" nextLabel="Next" skipLabel="Skip" finishLabel="Finish" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Vertical with icons usage">
|
||||
@@ -390,7 +390,7 @@ page StepperDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="stepper-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Stepper size="lg" steps='[{"label":"Account","title":"Your details","content":"Name, email and a password."},{"label":"Billing","title":"How you pay","content":"Card or invoice."},{"label":"Confirm","title":"Review","content":"Check everything before submitting."}]' active="1" controlled="false" clickable="false" label="Advanced example" showPanel="true" controls="true" allowSkip="true" nextDisabled="false" backLabel="Back" nextLabel="Next" skipLabel="Skip" finishLabel="Finish" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Wizard with content and controls usage">
|
||||
@@ -442,7 +442,7 @@ page StepperDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="stepper-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Stepper size="lg" steps='[{"label":"Account","title":"Your details","content":"This step is not complete yet."},{"label":"Billing","title":"How you pay","content":"Card or invoice."}]' active="0" controlled="false" clickable="false" label="Advanced example" showPanel="true" controls="true" allowSkip="false" nextDisabled="true" backLabel="Back" nextLabel="Next" skipLabel="Skip" finishLabel="Finish" class="showcase-instance showcase-instance--4" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Held until the step is valid usage">
|
||||
@@ -488,7 +488,7 @@ page StepperDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="stepper-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Stepper size="lg" steps='[{"label":"One"},{"label":"Two"},{"label":"Three"}]' active="0" controlled="false" clickable="true" label="Advanced example" showPanel="false" controls="false" allowSkip="false" nextDisabled="false" backLabel="Back" nextLabel="Next" skipLabel="Skip" finishLabel="Finish" class="showcase-instance showcase-instance--5" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Clickable steps usage">
|
||||
|
||||
@@ -82,7 +82,7 @@ page StrongPasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="strong-password-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><StrongPassword label="Live strength meter" name="strong-password-1" value="Northstar!2026" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&*()_+-=[]{}|;:,.<>?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="false" presentation="inline" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Live strength meter usage">
|
||||
@@ -104,7 +104,7 @@ page StrongPasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="strong-password-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><StrongPassword label="Requirements and hint text" name="strong-password-2" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&*()_+-=[]{}|;:,.<>?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="inline" hintText="Use a unique password you do not use for another account." disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Requirements and hint text usage">
|
||||
@@ -125,7 +125,7 @@ page StrongPasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="strong-password-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><StrongPassword label="Requirements in a popover" name="strong-password-3" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&*()_+-=[]{}|;:,.<>?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="popover" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Requirements in a popover usage">
|
||||
@@ -146,7 +146,7 @@ page StrongPasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="strong-password-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><StrongPassword label="Custom special characters" name="strong-password-4" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="@#_-." requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="inline" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Custom special characters usage">
|
||||
@@ -167,7 +167,7 @@ page StrongPasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="strong-password-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><StrongPassword label="Optional requirements" name="strong-password-5" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&*()_+-=[]{}|;:,.<>?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="false" showRequirements="true" presentation="inline" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Optional requirements usage">
|
||||
@@ -188,7 +188,7 @@ page StrongPasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="strong-password-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><StrongPassword label="Disabled password strength" name="strong-password-6" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&*()_+-=[]{}|;:,.<>?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="inline" hintText="" disabled="true" readonly="false" required="false" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled password strength usage">
|
||||
|
||||
@@ -46,7 +46,7 @@ page StyledIconDetail {
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>9 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -65,7 +65,7 @@ page StyledIconDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="styled-icon-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><StyledIcon size="default" color="primary" title="Styled Icon" description="" items='[]' variant="default" icon="icon-[lucide--sparkles]" label="Verified" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -90,7 +90,7 @@ page StyledIconDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="styled-icon-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><StyledIcon size="sm" color="success" title="Styled Icon" description="" items='[]' variant="default" icon="icon-[lucide--check]" label="Verified" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -118,7 +118,7 @@ page StyledIconDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="styled-icon-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><StyledIcon size="default" color="primary" title="Styled Icon" description="" items='[]' variant="outline" icon="icon-[lucide--shield-check]" label="Verified" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
@@ -137,7 +137,7 @@ page StyledIconDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Styled Icon"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--sparkles]"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -12,7 +12,7 @@ page SwitchDetail {
|
||||
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
|
||||
state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
|
||||
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
|
||||
state playground_checked = (ctx.url.searchParams.get("pg_checked") ?? "false") === "true"
|
||||
state playground_checked = ctx.url.searchParams.get("pg_checked") ?? ""
|
||||
state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? ""
|
||||
state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
|
||||
state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
|
||||
@@ -56,7 +56,7 @@ page SwitchDetail {
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>20 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-switch-size"><span><strong>size</strong><small>string</small></span><select id="playground-switch-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-switch-color"><span><strong>color</strong><small>string</small></span><select id="playground-switch-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-switch-id"><span><strong>id</strong><small>string</small></span><input id="playground-switch-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-switch-name"><span><strong>name</strong><small>string</small></span><input id="playground-switch-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-switch-label"><span><strong>label</strong><small>string</small></span><input id="playground-switch-label" name="pg_label" type="text" value="Switch" /></label><label class="playground-toggle" for="playground-switch-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-switch-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-switch-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-switch-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-switch-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-switch-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-switch-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-switch-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-switch-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-switch-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-switch-value"><span><strong>value</strong><small>string</small></span><input id="playground-switch-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-toggle" for="playground-switch-checked"><span><strong>checked</strong><small>boolean</small></span><input id="playground-switch-checked" name="pg_checked" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-switch-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-switch-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-switch-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-switch-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-switch-error"><span><strong>error</strong><small>string</small></span><input id="playground-switch-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-switch-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-switch-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-switch-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-switch-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-switchLine truncated
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-switch-size"><span><strong>size</strong><small>string</small></span><select id="playground-switch-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-switch-color"><span><strong>color</strong><small>string</small></span><select id="playground-switch-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-switch-id"><span><strong>id</strong><small>string</small></span><input id="playground-switch-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-switch-name"><span><strong>name</strong><small>string</small></span><input id="playground-switch-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-switch-label"><span><strong>label</strong><small>string</small></span><input id="playground-switch-label" name="pg_label" type="text" value="Switch" /></label><label class="playground-toggle" for="playground-switch-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-switch-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-switch-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-switch-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-switch-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-switch-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-switch-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-switch-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-switch-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-switch-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-switch-value"><span><strong>value</strong><small>string</small></span><input id="playground-switch-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-switch-checked"><span><strong>checked</strong><small>boolean | null</small></span><input id="playground-switch-checked" name="pg_checked" type="text" value="" /></label><label class="playground-field" for="playground-switch-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-switch-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-switch-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-switch-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-switch-error"><span><strong>error</strong><small>string</small></span><input id="playground-switch-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-switch-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-switch-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-switch-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-switch-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-switch-required" name="pg_required" type="checkbox" value=Line truncated
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -71,8 +71,8 @@ page SwitchDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="switch-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Switch size="default" label="Switch" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" checked="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
|
||||
<div class="demo-render"><Switch size="default" label="Switch" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -91,8 +91,8 @@ page SwitchDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="switch-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Switch size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" value="sample-2" checked="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
|
||||
<div class="demo-render"><Switch size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" value="sample-2" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -115,8 +115,8 @@ page SwitchDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="switch-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Switch size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" value="sample-3" checked="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
|
||||
<div class="demo-render"><Switch size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" value="sample-3" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -155,7 +155,7 @@ if (component) registerOutputHandler(component, "focus", (payload) => <span>&
|
||||
if (component) registerOutputHandler(component, "blur", (payload) => <span>{</span>
|
||||
console.log("blur", payload)
|
||||
<span>}</span>)</code></pre></section></div></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Switch"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>"on"</code></td><td>No</td></tr><tr><td><code>checked</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Switch"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>"on"</code></td><td>No</td></tr><tr><td><code>checked</code></td><td>boolean | null</td><td><code>null</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#switch-demo-1">Production default</a><a href="#switch-demo-2">Compact application</a><a href="#switch-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
|
||||
@@ -278,7 +278,7 @@ page TabsDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="tabs-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Tabs size="default" items='[{"label":"Overview","value":"overview","content":"Overview content"},{"label":"Requirements","value":"requirements","content":"Requirements content"},{"label":"Process","value":"process","content":"Process content"}]' active="overview" orientation="horizontal" label="Service information" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal content tabs usage">
|
||||
@@ -320,7 +320,7 @@ page TabsDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="tabs-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Tabs size="sm" items='[{"label":"Account","value":"account","description":"Profile and credentials."},{"label":"Billing","value":"billing","description":"Invoices and payment method."},{"label":"Team","value":"team","description":"Members and their roles."}]' active="account" mode="url" param="tab" label="Account settings" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Mirrored into the URL usage">
|
||||
@@ -364,7 +364,7 @@ page TabsDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="tabs-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Tabs size="sm" items='[{"label":"Details","value":"details"},{"label":"History","value":"history"},{"label":"Files","value":"files"}]' active="details" label="Record views" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application tabs usage">
|
||||
@@ -404,7 +404,7 @@ page TabsDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="tabs-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Tabs size="lg" items='[{"label":"Profile","value":"profile","icon":"icon-[lucide--user]"},{"label":"Security","value":"security","icon":"icon-[lucide--shield]"},{"label":"Notifications","value":"notifications","icon":"icon-[lucide--bell]"}]' active="security" orientation="vertical" label="Settings" class="showcase-instance showcase-instance--4" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Vertical settings tabs usage">
|
||||
|
||||
@@ -65,7 +65,7 @@ page TextLinkDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="text-link-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TextLink label="Learn more" href="#learn" external="false" icon="" showArrow="true" underline="false" size="default" variant="default" disabled="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Inline directional link usage">
|
||||
@@ -84,7 +84,7 @@ page TextLinkDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="text-link-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TextLink label="Read the complete guide" href="#guide" external="false" icon="icon-[lucide--arrow-right]" showArrow="false" underline="true" size="sm" variant="secondary" disabled="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Underlined content link usage">
|
||||
@@ -109,7 +109,7 @@ page TextLinkDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="text-link-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TextLink label="Open WRNexusJS documentation" href="https://wrnexusjs.dev" target="_blank" external="true" icon="icon-[lucide--book-open]" iconPosition="start" showArrow="false" underline="false" size="lg" variant="soft" disabled="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="External developer link usage">
|
||||
|
||||
@@ -74,7 +74,7 @@ page TextareaDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="textarea-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Textarea size="default" label="Textarea" hiddenLabel="false" placeholder="Enter a sample value" value="sample-1" variant="normal" icon="" inline="false" rows="5" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -94,7 +94,7 @@ page TextareaDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="textarea-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Textarea size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" value="sample-2" variant="secondary" icon="icon-[lucide--arrow-right]" inline="false" rows="5" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -118,7 +118,7 @@ page TextareaDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="textarea-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Textarea size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" value="sample-3" variant="success" icon="icon-[lucide--trash-2]" inline="false" rows="5" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -156,7 +156,7 @@ page TimePickerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="time-picker-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TimePicker size="default" name="meeting-time" label="Meeting time" hiddenLabel="false" value="09:30" placeholder="Enter a sample value" variant="normal" icon="" inline="false" minuteStep="5" hours='["00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23"]' minutes='["00","05","10","15","20","25","30","35","40","45","50","55"]' readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Time picker usage">
|
||||
|
||||
@@ -279,7 +279,7 @@ page TimelineDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="timeline-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Timeline size="default" title="Request progress" description="Latest updates for this service request." items='[{"title":"Request submitted","description":"Received successfully","time":"09:30","status":"complete"},{"title":"Verification","description":"Documents are being reviewed","time":"10:15","current":true},{"title":"Decision","description":"Pending verification","time":"—"}]' variant="default" numbered="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Application timeline usage">
|
||||
@@ -323,7 +323,7 @@ page TimelineDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="timeline-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Timeline size="sm" title="Recent activity" description="A compact configuration for dashboards and dense product surfaces." items='[{"title":"Status changed","time":"Today"},{"title":"Comment added","time":"Yesterday"},{"title":"Document uploaded","time":"3 days ago"}]' variant="compact" numbered="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact activity history usage">
|
||||
@@ -364,7 +364,7 @@ page TimelineDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="timeline-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Timeline size="lg" title="Implementation milestones" description="Planned delivery sequence." items='[{"title":"Foundation","description":"Tokens, themes, and primitives","icon":"icon-[lucide--layers-3]","status":"complete"},{"title":"Components","description":"Reusable UI and documentation","icon":"icon-[lucide--blocks]","current":true},{"title":"Applications","description":"Compose production interfaces","icon":"icon-[lucide--rocket]"}]' variant="alternate" numbered="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich milestone timeline usage">
|
||||
|
||||
@@ -65,7 +65,7 @@ page ToasterDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toaster-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><div class="showcase-toast-demo"><button type="button" @click='toast.success("Your changes are live", { title: "Published" })'>success</button><button type="button" @click='toast.error("We could not reach the server", { title: "Network error" })'>danger</button><button type="button" @click='toast.warning("Your trial ends in 3 days", { title: "Heads up", icon: "icon-[lucide--hourglass]" })'>warning + custom icon</button><button type="button" @click='toast.info("Export queued")'>info</button><button type="button" @click='toast("Note deleted", { title: "Deleted", actionLabel: "Undo" })'>one action</button><button type="button" @click='toast.warning("This file changed elsewhere", { title: "Conflict", duration: 0, actions: [{ label: "Keep mine" }, { label: "Discard", tone: "danger" }] })'>two actions (sticky)</button><button type="button" @click='toast("No icon on this one", { icon: false })'>icon suppressed</button><button type="button" @click='toast.success("Gone in 1.5s", { duration: 1500 })'>short duration</button><button type="button" @click='toast.clear()'>clear all</button></div><Toaster size="default" position="bottom-right" duration="4500" max="4" pauseOnHover="true" showIcon="true" closable="true" showProgress="true" closeLabel="Toaster" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Raise notifications from anywhere usage">
|
||||
|
||||
@@ -112,7 +112,7 @@ page ToggleCountDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-count-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ToggleCount size="default" variant="segmented" class="showcase-instance showcase-instance--1" value="monthly" firstValue="monthly" firstLabel="Monthly" secondValue="annual" secondLabel="Yearly" ariaLabel="Toggle Count 1 example" items='[{"title":"Starter","label":"Starter","description":"For individuals getting started.","monthly":12,"annual":120},{"title":"Team","label":"Team","description":"For teams working together.","monthly":29,"annual":290}]' firstValueKey="monthly" secondValueKey="annual" align="start" fullWidth="false" disabled="false" animate="true" animationDuration="450" animationSteps="18" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -155,7 +155,7 @@ page ToggleCountDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-count-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ToggleCount size="sm" variant="secondary" class="showcase-instance showcase-instance--2" value="monthly" firstValue="monthly" firstLabel="Monthly" secondValue="annual" secondLabel="Yearly" ariaLabel="Toggle Count 2 example" items='[{"title":"Starter","label":"Starter","description":"For individuals getting started.","monthly":12,"annual":120},{"title":"Team","label":"Team","description":"For teams working together.","monthly":29,"annual":290}]' firstValueKey="monthly" secondValueKey="annual" align="center" fullWidth="false" disabled="false" animate="true" animationDuration="450" animationSteps="18" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -200,7 +200,7 @@ page ToggleCountDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-count-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ToggleCount size="lg" variant="success" class="showcase-instance showcase-instance--3" value="monthly" firstValue="monthly" firstLabel="Monthly" secondValue="annual" secondLabel="Yearly" ariaLabel="Toggle Count 3 example" items='[{"title":"Starter","label":"Starter","description":"For individuals getting started.","monthly":12,"annual":120},{"title":"Team","label":"Team","description":"For teams working together.","monthly":29,"annual":290}]' firstValueKey="monthly" secondValueKey="annual" align="end" fullWidth="true" disabled="false" animate="true" animationDuration="450" animationSteps="18" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -85,7 +85,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TogglePassword size="default" label="Password" name="toggle-password-1" value="Northstar!2026" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Inline visibility button usage">
|
||||
@@ -112,7 +112,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TogglePassword size="default" label="Checkbox-controlled toggle" name="toggle-password-2" value="Northstar!2026" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="checkbox" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Checkbox-controlled toggle usage">
|
||||
@@ -141,7 +141,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TogglePassword size="default" label="Passwords" name="toggle-password-3" value="" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" 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"}]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Synchronized password fields usage">
|
||||
@@ -181,7 +181,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TogglePassword size="default" label="Without visibility toggle" name="toggle-password-4" value="" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="false" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Without visibility toggle usage">
|
||||
@@ -209,7 +209,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TogglePassword size="default" label="Supporting help text" name="toggle-password-5" value="" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="Use at least eight characters and avoid passwords used on other sites." validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Supporting help text usage">
|
||||
@@ -237,7 +237,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><form data-schema="toggle-password-validation" class="demo-validation-form"><TogglePassword size="default" label="Required validation" name="toggle-password-6" value="" placeholder="Enter your password" autocomplete="current-password" minlength="8" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="true" invalid="false" helpText="" validationMessage="" /><button type="submit" class="wrn-btn wrn-btn--variant-default">Validate selection</button></form></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Required validation usage">
|
||||
@@ -266,7 +266,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TogglePassword size="default" label="Disabled password" name="toggle-password-7" value="" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="true" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled password usage">
|
||||
@@ -294,7 +294,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TogglePassword size="default" label="Read-only password" name="toggle-password-8" value="Northstar!2026" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="true" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Read-only password usage">
|
||||
@@ -323,7 +323,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TogglePassword size="lg" label="Large password field" name="toggle-password-9" value="" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Large password field usage">
|
||||
@@ -351,7 +351,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-10" class="demo-canvas demo-canvas--10">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TogglePassword size="default" label="Toggle events" name="toggle-password-10" value="" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Toggle events usage">
|
||||
|
||||
@@ -122,7 +122,7 @@ page TreeViewDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="tree-view-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TreeView title="Project files" description="" items='[{"value":"src","label":"src","children":[{"value":"pages","label":"pages","children":[{"value":"home","label":"index.wrn"}]},{"value":"styles","label":"styles.css"}]},{"value":"readme","label":"README.md"}]' valueKey="value" labelKey="label" defaultExpanded='["src"]' selected="" size="default" color="primary" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -176,7 +176,7 @@ page TreeViewDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="tree-view-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TreeView title="Project files" description="" items='[{"value":"src","label":"src","children":[{"value":"pages","label":"pages","children":[{"value":"home","label":"index.wrn"}]},{"value":"styles","label":"styles.css"}]},{"value":"readme","label":"README.md"}]' valueKey="value" labelKey="label" defaultExpanded='["src"]' selected="" size="default" color="primary" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -230,7 +230,7 @@ page TreeViewDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="tree-view-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TreeView title="Project files" description="" items='[{"value":"src","label":"src","children":[{"value":"pages","label":"pages","children":[{"value":"home","label":"index.wrn"}]},{"value":"styles","label":"styles.css"}]},{"value":"readme","label":"README.md"}]' valueKey="value" labelKey="label" defaultExpanded='["src"]' selected="" size="default" color="primary" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -37,7 +37,7 @@ page TypographyDetail {
|
||||
</Typography></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -56,7 +56,7 @@ page TypographyDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="typography-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Typography size="default" columns="2" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-typography"><h2>Readable page content</h2><p>Typography creates consistent hierarchy and comfortable reading rhythm.</p><ul><li>Clear headings</li><li>Readable paragraphs</li><li>Consistent lists</li></ul></div></Typography></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Readable content typography usage">
|
||||
@@ -75,7 +75,7 @@ page TypographyDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="typography-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Typography size="compact" columns="2" maxWidth="compact" class="showcase-instance showcase-instance--2"><div class="showcase-typography"><h3>Compact reference</h3><p>Focused content with reduced spacing.</p></div></Typography></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact documentation typography usage">
|
||||
@@ -96,7 +96,7 @@ page TypographyDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="typography-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Typography size="spacious" columns="2" gap="xl" maxWidth="wide" class="showcase-instance showcase-instance--3"><div class="showcase-typography"><h2>Long-form public information</h2><p>Structured editorial content can use a wider two-column layout on large screens.</p><p>Responsive behavior returns content to one column on smaller screens.</p></div></Typography></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Wide editorial typography usage">
|
||||
@@ -110,7 +110,7 @@ page TypographyDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -67,7 +67,7 @@ page WysiwygEditorDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="wysiwyg-editor-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><WysiwygEditor size="default" color="primary" title="Project update" description="" items='[]' variant="default" value="Share progress, decisions, and next steps with your team." readonly="false" placeholder="Write something…" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -93,7 +93,7 @@ page WysiwygEditorDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="wysiwyg-editor-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><WysiwygEditor size="default" color="primary" title="Project update" description="" items='[]' variant="default" value="Share progress, decisions, and next steps with your team." readonly="false" placeholder="Write something…" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -119,7 +119,7 @@ page WysiwygEditorDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="wysiwyg-editor-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><WysiwygEditor size="default" color="primary" title="Project update" description="" items='[]' variant="default" value="Share progress, decisions, and next steps with your team." readonly="true" placeholder="Write something…" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
+23
-3
@@ -3,16 +3,36 @@ page CoreShowcase {
|
||||
layout = "showcase"
|
||||
seo {
|
||||
title = "Core components"
|
||||
description = "2 core components from @wrnexus/ui."
|
||||
description = "4 core components from @wrnexus/ui."
|
||||
}
|
||||
view {
|
||||
<header class="showcase-hero showcase-hero--category">
|
||||
<span class="showcase-eyebrow">Component category</span>
|
||||
<h1 class="showcase-title">Core</h1>
|
||||
<p class="showcase-description">2 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
||||
<div class="category-meta"><span>2 components</span><span>Multiple use cases</span><span>4 live configurations</span></div>
|
||||
<p class="showcase-description">4 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
||||
<div class="category-meta"><span>4 components</span><span>Multiple use cases</span><span>10 live configurations</span></div>
|
||||
</header>
|
||||
<div class="catalog-grid">
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><DrawflowCanvas toolbar="true" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Core</span><h2>Drawflow Canvas</h2><p>Reusable drawflow canvas component.</p></div>
|
||||
<div class="catalog-card-footer"><span>3 props · 0 slots</span><a href="/components/drawflow-canvas">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><FlowCanvas nodes='[{"id":"flow-canvas-0-1","key":"flow-canvas-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":"#flow-canvas-demo","actionHref":"#flow-canvas-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":"flow-canvas-0-2","key":"flow-canvas-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#flow-canvas-demo","actionHref":"#flow-canvas-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"]}]' palette='[{"id":"flow-canvas-0-1","key":"flow-canvas-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":"#flow-canvas-demo","actionHref":"#flow-canvas-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":"flow-canvas-0-2","key":"flow-canvas-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#flow-canvas-demo","actionHref":"#flow-canvas-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"]}]' label="Flow Canvas" arrangeLabel="Flow Canvas" connectLabel="Flow Canvas" size="default" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Core</span><h2>Flow Canvas</h2><p>Reusable flow canvas component.</p></div>
|
||||
<div class="catalog-card-footer"><span>9 props · 0 slots</span><a href="/components/flow-canvas">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
|
||||
@@ -10,7 +10,7 @@ page DarkModeGuide {
|
||||
<header class="docs-intro"><span class="showcase-eyebrow">Customization</span><h1>Dark mode</h1><p>Choose light, dark, or system mode. The selection persists and updates every preview.</p></header>
|
||||
<section class="guide-section"><h2>Overview</h2><p>Choose light, dark, or system mode. The selection persists and updates every preview.</p></section><section class="guide-section"><h2>Configuration</h2><p>Use the design switcher in the header to test this setting live.</p></section><section class="guide-section"><h2>Component behavior</h2><p>The setting is inherited by components, blocks, templates, and playground previews.</p></section>
|
||||
<section class="guide-section"><h2>Use semantic colors in both modes</h2><p>Use shared surface, text, border and focus tokens instead of hard-coded white and black. Check disabled, hover, selected and error states in both themes using the appearance control.</p><pre><code>.panel <span>{</span> background: var(--wrn-color-surface); color: var(--wrn-color-text); border: 1px solid var(--wrn-color-border); <span>}</span></code></pre><h3>Verify the result</h3><p>Open the matching component page, change its options, and try the keyboard controls. Copy the demonstrated configuration into your page, then replace sample content with your data.</p></section>
|
||||
|
||||
|
||||
<nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav>
|
||||
</article>
|
||||
}
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@ page FontsGuide {
|
||||
<section class="guide-section"><h2>Overview</h2><p>Select a font family globally while components continue to inherit typography correctly.</p></section><section class="guide-section"><h2>Configuration</h2><p>Use the design switcher in the header to test this setting live.</p></section><section class="guide-section"><h2>Component behavior</h2><p>The setting is inherited by components, blocks, templates, and playground previews.</p></section>
|
||||
<section class="guide-section"><h2>Set one application font</h2><p>Components inherit the shared font family. Supply a font stack once; use font weights and spacing to establish hierarchy instead of enlarging every label.</p><pre><code>:root <span>{</span> --wrn-font-sans: "Inter", system-ui, sans-serif; <span>}</span>
|
||||
body <span>{</span> font-family: var(--wrn-font-sans); <span>}</span></code></pre><h3>Verify the result</h3><p>Open the matching component page, change its options, and try the keyboard controls. Copy the demonstrated configuration into your page, then replace sample content with your data.</p></section>
|
||||
|
||||
|
||||
<nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav>
|
||||
</article>
|
||||
}
|
||||
|
||||
+1
-1
@@ -106,7 +106,7 @@ page FormsShowcase {
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><Switch size="default" label="Switch" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" checked="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
<div class="catalog-card-stage"><Switch size="default" label="Switch" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Forms</span><h2>Switch</h2><p>Theme-aware, responsive switch component.</p></div>
|
||||
|
||||
@@ -13,7 +13,7 @@ page FrameworkGuidesGuide {
|
||||
state name: string = ""
|
||||
view <span>{</span> <Input label="Your name" value="<span>{</span>name<span>}</span>" @input="name = payload.value" /><p>Hello <span>{</span>name<span>}</span></p> <span>}</span>
|
||||
<span>}</span></code></pre><h3>Verify the result</h3><p>Open the matching component page, change its options, and try the keyboard controls. Copy the demonstrated configuration into your page, then replace sample content with your data.</p></section>
|
||||
|
||||
|
||||
<nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav>
|
||||
</article>
|
||||
}
|
||||
|
||||
+5
-5
@@ -10,18 +10,18 @@ page ComponentShowcase {
|
||||
<header class="showcase-hero showcase-hero--home">
|
||||
<span class="showcase-eyebrow">The UI foundation for WRNexus</span>
|
||||
<h1 class="showcase-title">Build modern products<br /><em>at framework speed.</em></h1>
|
||||
<p class="showcase-description">A complete, accessible component system with 84 primitives, ready-made blocks, page templates, responsive behavior, and deeply configurable design tokens.</p>
|
||||
<p class="showcase-description">A complete, accessible component system with 86 primitives, ready-made blocks, page templates, responsive behavior, and deeply configurable design tokens.</p>
|
||||
<div class="home-actions"><a class="home-primary-action" href="/docs">Get started <span aria-hidden="true">→</span></a><a class="home-secondary-action" href="/block-library">Explore blocks</a></div>
|
||||
<div class="home-install"><span>$</span><code>bun add @wrnexus/ui</code><button type="button" data-copy-text="bun add @wrnexus/ui" aria-label="Copy install command"><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span></button></div>
|
||||
</header>
|
||||
<section class="home-product-grid"><article><span class="icon-[lucide--component] size-7"></span><strong>84 components</strong><p>Accessible primitives for every product surface.</p><a href="/base">Browse components →</a></article><article><span class="icon-[lucide--layout-template] size-7"></span><strong>Ready-made blocks</strong><p>Composable sections assembled from WRNexus UI.</p><a href="/block-library">Explore blocks →</a></article><article><span class="icon-[lucide--panels-top-left] size-7"></span><strong>Page templates</strong><p>Complete responsive pages ready to customize.</p><a href="/templates">View templates →</a></article></section>
|
||||
<section class="home-product-grid"><article><span class="icon-[lucide--component] size-7"></span><strong>86 components</strong><p>Accessible primitives for every product surface.</p><a href="/base">Browse components →</a></article><article><span class="icon-[lucide--layout-template] size-7"></span><strong>Ready-made blocks</strong><p>Composable sections assembled from WRNexus UI.</p><a href="/block-library">Explore blocks →</a></article><article><span class="icon-[lucide--panels-top-left] size-7"></span><strong>Page templates</strong><p>Complete responsive pages ready to customize.</p><a href="/templates">View templates →</a></article></section>
|
||||
<section class="showcase-stats">
|
||||
<div class="showcase-stat"><strong>84</strong><span>Unique components</span></div>
|
||||
<div class="showcase-stat"><strong>346</strong><span>Live configurations</span></div>
|
||||
<div class="showcase-stat"><strong>86</strong><span>Unique components</span></div>
|
||||
<div class="showcase-stat"><strong>361</strong><span>Live configurations</span></div>
|
||||
<div class="showcase-stat"><strong>0</strong><span>Duplicate implementations</span></div>
|
||||
<div class="showcase-stat"><strong>11</strong><span>Focused categories</span></div>
|
||||
</section>
|
||||
<section class="home-categories"><div class="home-section-heading"><span>Explore the system</span><h2>Everything your product needs</h2></div><div class="home-category-grid"><a class="home-category home-category--1" href="/base"><span class="home-category-index">01</span><div><strong>Base</strong><p>26 components · 85 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/core"><span class="home-category-index">02</span><div><strong>Core</strong><p>2 components · 4 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/data"><span class="home-category-index">03</span><div><strong>Data</strong><p>1 components · 3 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/forms"><span class="home-category-index">04</span><div><strong>Forms</strong><p>12 components · 32 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/integrations"><span class="home-category-index">05</span><div><strong>Integrations</strong><p>7 components · 19 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/layout"><span class="home-category-index">06</span><div><strong>Layout</strong><p>11 components · 31 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/marketing"><span class="home-category-index">07</span><div><strong>Marketing</strong><p>1 components · 3 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/navigation"><span class="home-category-index">08</span><div><strong>Navigation</strong><p>10 components · 30 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/overlays"><span class="home-category-index">09</span><div><strong>Overlays</strong><p>6 components · 21 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/tables"><span class="home-category-index">010</span><div><strong>Tables</strong><p>1 components · 9 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/advanced-forms"><span class="home-category-index">011</span><div><strong>Advanced Forms</strong><p>7 components · 109 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a></div></section>
|
||||
<section class="home-categories"><div class="home-section-heading"><span>Explore the system</span><h2>Everything your product needs</h2></div><div class="home-category-grid"><a class="home-category home-category--1" href="/base"><span class="home-category-index">01</span><div><strong>Base</strong><p>26 components · 85 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/core"><span class="home-category-index">02</span><div><strong>Core</strong><p>4 components · 10 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/data"><span class="home-category-index">03</span><div><strong>Data</strong><p>1 components · 3 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/forms"><span class="home-category-index">04</span><div><strong>Forms</strong><p>12 components · 32 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/integrations"><span class="home-category-index">05</span><div><strong>Integrations</strong><p>7 components · 28 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/layout"><span class="home-category-index">06</span><div><strong>Layout</strong><p>11 components · 31 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/marketing"><span class="home-category-index">07</span><div><strong>Marketing</strong><p>1 components · 3 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/navigation"><span class="home-category-index">08</span><div><strong>Navigation</strong><p>10 components · 30 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/overlays"><span class="home-category-index">09</span><div><strong>Overlays</strong><p>6 components · 21 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/tables"><span class="home-category-index">010</span><div><strong>Tables</strong><p>1 components · 9 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/advanced-forms"><span class="home-category-index">011</span><div><strong>Advanced Forms</strong><p>7 components · 109 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a></div></section>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -10,17 +10,17 @@ page IntegrationsShowcase {
|
||||
<span class="showcase-eyebrow">Component category</span>
|
||||
<h1 class="showcase-title">Integrations</h1>
|
||||
<p class="showcase-description">7 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
||||
<div class="category-meta"><span>7 components</span><span>Multiple use cases</span><span>19 live configurations</span></div>
|
||||
<div class="category-meta"><span>7 components</span><span>Multiple use cases</span><span>28 live configurations</span></div>
|
||||
</header>
|
||||
<div class="catalog-grid">
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><Chart title="Weekly signups" description="Completed tasks this week" items='[]' data='[{"label":"Mon","value":24},{"label":"Tue","value":38},{"label":"Wed","value":29},{"label":"Thu","value":52},{"label":"Fri","value":45}]' type="bar" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="true" size="default" color="primary" variant="bar" class="" /></div>
|
||||
<div class="catalog-card-stage"><Chart title="Sample weekly changes" description="Sample data" items='[]' data='[{"label":"Mon","value":24},{"label":"Tue","value":-12},{"label":"Wed","value":29},{"label":"Thu","value":52},{"label":"Fri","value":45}]' labels='[]' datasets='[]' type="bar" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Integrations</span><h2>Chart</h2><p>Theme-aware, responsive chart component.</p></div>
|
||||
<div class="catalog-card-footer"><span>14 props · 1 slots</span><a href="/components/chart">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
<div class="catalog-card-footer"><span>17 props · 1 slots</span><a href="/components/chart">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
|
||||
@@ -13,7 +13,7 @@ page ResourcesGuide {
|
||||
state rows = [<span>{</span> id: 1, name: "Northwind" <span>}</span>]
|
||||
state columns = [<span>{</span> key: "name", label: "Account" <span>}</span>]
|
||||
<DataTable rows="<span>{</span>rows<span>}</span>" columns="<span>{</span>columns<span>}</span>" /></code></pre><h3>Verify the result</h3><p>Open the matching component page, change its options, and try the keyboard controls. Copy the demonstrated configuration into your page, then replace sample content with your data.</p></section>
|
||||
|
||||
|
||||
<nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav>
|
||||
</article>
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@ page SizingGuide {
|
||||
<section class="guide-section"><h2>Match density to the task</h2><p>Use compact controls for dense toolbars and tables, and the default size for forms. Keep related controls at the same size and retain usable touch targets on small screens.</p><pre><code><Button label="Filter" size="sm" />
|
||||
<Input label="Project name" size="default" />
|
||||
<RangeSlider label="Scale" min="0" max="5" step="0.2" value="2.4" /></code></pre><h3>Verify the result</h3><p>Open the matching component page, change its options, and try the keyboard controls. Copy the demonstrated configuration into your page, then replace sample content with your data.</p></section>
|
||||
|
||||
|
||||
<nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav>
|
||||
</article>
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ page ThemesGuide {
|
||||
<section class="guide-section"><h2>Default</h2><p>Balanced surfaces, borders, elevation, and radius.</p></section><section class="guide-section"><h2>Soft and sharp</h2><p>Choose friendly rounded surfaces or dense operational styling.</p></section><section class="guide-section"><h2>Glass</h2><p>Use translucent layered surfaces while retaining semantic tokens.</p></section>
|
||||
<section class="guide-section"><h2>Keep theme overrides in one place</h2><p>Override design tokens at your application root so all components inherit the same appearance. Start with radius and brand color, then review overlays, forms and navigation together.</p><pre><code>:root <span>{</span> --wrn-radius: 8px; --wrn-color-primary: #7c3aed; <span>}</span>
|
||||
<Button label="Primary action" color="primary" /></code></pre><h3>Verify the result</h3><p>Open the matching component page, change its options, and try the keyboard controls. Copy the demonstrated configuration into your page, then replace sample content with your data.</p></section>
|
||||
|
||||
|
||||
<nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav>
|
||||
</article>
|
||||
}
|
||||
|
||||
@@ -55,9 +55,11 @@ export interface Routes {
|
||||
"/components/divider": Record<string, never>;
|
||||
"/components/drag-and-drop": Record<string, never>;
|
||||
"/components/drawer": Record<string, never>;
|
||||
"/components/drawflow-canvas": Record<string, never>;
|
||||
"/components/dropdown": Record<string, never>;
|
||||
"/components/file-input": Record<string, never>;
|
||||
"/components/file-upload-progress": Record<string, never>;
|
||||
"/components/flow-canvas": Record<string, never>;
|
||||
"/components/grid": Record<string, never>;
|
||||
"/components/image": Record<string, never>;
|
||||
"/components/input": Record<string, never>;
|
||||
@@ -200,9 +202,11 @@ export interface RouteNames {
|
||||
"components.divider": "/components/divider";
|
||||
"components.drag.and.drop": "/components/drag-and-drop";
|
||||
"components.drawer": "/components/drawer";
|
||||
"components.drawflow.canvas": "/components/drawflow-canvas";
|
||||
"components.dropdown": "/components/dropdown";
|
||||
"components.file.input": "/components/file-input";
|
||||
"components.file.upload.progress": "/components/file-upload-progress";
|
||||
"components.flow.canvas": "/components/flow-canvas";
|
||||
"components.grid": "/components/grid";
|
||||
"components.image": "/components/image";
|
||||
"components.input": "/components/input";
|
||||
@@ -414,9 +418,11 @@ export function route<N extends RouteName>(
|
||||
"components.divider": "/components/divider",
|
||||
"components.drag.and.drop": "/components/drag-and-drop",
|
||||
"components.drawer": "/components/drawer",
|
||||
"components.drawflow.canvas": "/components/drawflow-canvas",
|
||||
"components.dropdown": "/components/dropdown",
|
||||
"components.file.input": "/components/file-input",
|
||||
"components.file.upload.progress": "/components/file-upload-progress",
|
||||
"components.flow.canvas": "/components/flow-canvas",
|
||||
"components.grid": "/components/grid",
|
||||
"components.image": "/components/image",
|
||||
"components.input": "/components/input",
|
||||
|
||||
+161
-30
@@ -2415,7 +2415,7 @@ body {
|
||||
|
||||
.detail-hero {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: .75rem;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem 0;
|
||||
border-radius: var(--wrn-radius-md);
|
||||
}
|
||||
@@ -2428,7 +2428,10 @@ body {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.detail-hero-icon > span { width: 1.5rem; height: 1.5rem; }
|
||||
.detail-hero-icon > span {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.detail-hero h1 {
|
||||
font-size: clamp(1.5rem, 6vw, 2rem);
|
||||
@@ -3016,34 +3019,162 @@ body {
|
||||
min-height: 18rem;
|
||||
}
|
||||
|
||||
[data-docs-empty][hidden] { display:none !important; }
|
||||
.demo-render:has(.wrn-back-to-top), .playground-preview-source:has(.wrn-back-to-top) { position:relative; transform:translateZ(0); }
|
||||
.demo-render:has(.wrn-chart,.wrn-map,.wrn-editor,.wrn-table), .playground-preview-source:has(.wrn-chart,.wrn-map,.wrn-editor,.wrn-table) { padding:1rem; }
|
||||
.demo-case:has(.wrn-chart,.wrn-map,.wrn-editor,.wrn-table) .demo-workbench { grid-template-columns:minmax(0,1fr); }
|
||||
[data-docs-empty][hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
.demo-render:has(.wrn-back-to-top),
|
||||
.playground-preview-source:has(.wrn-back-to-top) {
|
||||
position: relative;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.demo-render:has(.wrn-chart, .wrn-map, .wrn-editor, .wrn-table),
|
||||
.playground-preview-source:has(.wrn-chart, .wrn-map, .wrn-editor, .wrn-table) {
|
||||
padding: 1rem;
|
||||
}
|
||||
.demo-case:has(.wrn-chart, .wrn-map, .wrn-editor, .wrn-table) .demo-workbench {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.example-catalog { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap:1.25rem; }
|
||||
.example-card { display:block; overflow:hidden; border:1px solid var(--wrn-color-border); border-radius:12px; color:var(--wrn-color-text); background:var(--wrn-color-surface); text-decoration:none; }
|
||||
.example-card__art { display:grid; place-items:center; height:9rem; background:var(--wrn-color-surface-2); border-bottom:1px solid var(--wrn-color-border); }
|
||||
.example-card__art span { width:2.5rem; height:2.5rem; color:var(--wrn-color-primary-text); }
|
||||
.example-card > div:last-child { padding:1.25rem; }
|
||||
.example-card h2 { font-size:1.1rem; margin:0 0 .5rem; }
|
||||
.example-card p { font-size:.875rem; color:var(--wrn-color-muted); min-height:2.8rem; }
|
||||
.example-card strong { font-size:.8rem; color:var(--wrn-color-primary-text); }
|
||||
.example-toolbar { display:flex; justify-content:space-between; padding:1rem 2rem; border-bottom:1px solid var(--wrn-color-border); background:var(--wrn-color-surface); }
|
||||
.example-code-panel { margin:2rem auto; width:min(100% - 2rem,80rem); border:1px solid var(--wrn-color-border); border-radius:10px; overflow:hidden; background:var(--wrn-color-surface); }
|
||||
.example-code-panel header { display:flex; justify-content:space-between; align-items:center; padding:1rem; border-bottom:1px solid var(--wrn-color-border); }
|
||||
.example-code-panel h2 { font-size:1rem; margin:0; }
|
||||
.example-code-panel button { padding:.45rem .8rem; border:1px solid var(--wrn-color-border); border-radius:6px; background:var(--wrn-color-surface-2); color:var(--wrn-color-text); cursor:pointer; }
|
||||
.example-code-panel pre { margin:0; padding:1.25rem; max-height:32rem; overflow:auto; font-size:.8rem; white-space:pre; }
|
||||
.example-code-panel summary { padding:1rem; cursor:pointer; }
|
||||
.block-live-preview { padding:clamp(1rem,3vw,2rem); border:1px solid var(--wrn-color-border); border-radius:10px; background:var(--wrn-color-bg); overflow:auto; }
|
||||
.example-form-page { max-width:42rem; margin:3rem auto; padding:1.5rem; display:grid; gap:1.5rem; }
|
||||
.example-form-page h1 { margin:0; font-size:1.75rem; }
|
||||
.example-catalog {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
|
||||
gap: 1.25rem;
|
||||
}
|
||||
.example-card {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: 12px;
|
||||
color: var(--wrn-color-text);
|
||||
background: var(--wrn-color-surface);
|
||||
text-decoration: none;
|
||||
}
|
||||
.example-card__art {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 9rem;
|
||||
background: var(--wrn-color-surface-2);
|
||||
border-bottom: 1px solid var(--wrn-color-border);
|
||||
}
|
||||
.example-card__art span {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
color: var(--wrn-color-primary-text);
|
||||
}
|
||||
.example-card > div:last-child {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
.example-card h2 {
|
||||
font-size: 1.1rem;
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
.example-card p {
|
||||
font-size: 0.875rem;
|
||||
color: var(--wrn-color-muted);
|
||||
min-height: 2.8rem;
|
||||
}
|
||||
.example-card strong {
|
||||
font-size: 0.8rem;
|
||||
color: var(--wrn-color-primary-text);
|
||||
}
|
||||
.example-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 2rem;
|
||||
border-bottom: 1px solid var(--wrn-color-border);
|
||||
background: var(--wrn-color-surface);
|
||||
}
|
||||
.example-code-panel {
|
||||
margin: 2rem auto;
|
||||
width: min(100% - 2rem, 80rem);
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: var(--wrn-color-surface);
|
||||
}
|
||||
.example-code-panel header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--wrn-color-border);
|
||||
}
|
||||
.example-code-panel h2 {
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
.example-code-panel button {
|
||||
padding: 0.45rem 0.8rem;
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: 6px;
|
||||
background: var(--wrn-color-surface-2);
|
||||
color: var(--wrn-color-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
.example-code-panel pre {
|
||||
margin: 0;
|
||||
padding: 1.25rem;
|
||||
max-height: 32rem;
|
||||
overflow: auto;
|
||||
font-size: 0.8rem;
|
||||
white-space: pre;
|
||||
}
|
||||
.example-code-panel summary {
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.block-live-preview {
|
||||
padding: clamp(1rem, 3vw, 2rem);
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: 10px;
|
||||
background: var(--wrn-color-bg);
|
||||
overflow: auto;
|
||||
}
|
||||
.example-form-page {
|
||||
max-width: 42rem;
|
||||
margin: 3rem auto;
|
||||
padding: 1.5rem;
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.example-form-page h1 {
|
||||
margin: 0;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.gallery-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem clamp(1rem,5vw,5rem); border-bottom:1px solid var(--wrn-color-border); }
|
||||
.gallery-header nav { display:flex; flex-wrap:wrap; gap:1.5rem; font-size:.875rem; }
|
||||
.gallery-main { max-width:1440px; margin:auto; padding:clamp(1rem,4vw,4rem); }
|
||||
.template-products { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:1.25rem; }
|
||||
@media(max-width:600px) { .gallery-header { align-items:flex-start; flex-direction:column; } }
|
||||
.gallery-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 1.25rem clamp(1rem, 5vw, 5rem);
|
||||
border-bottom: 1px solid var(--wrn-color-border);
|
||||
}
|
||||
.gallery-header nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.gallery-main {
|
||||
max-width: 1440px;
|
||||
margin: auto;
|
||||
padding: clamp(1rem, 4vw, 4rem);
|
||||
}
|
||||
.template-products {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
|
||||
gap: 1.25rem;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.gallery-header {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.playground-preview-source:has(.wrn-confetti), .demo-render:has(.wrn-confetti) { justify-items:center; overflow:hidden; }
|
||||
.playground-preview-source:has(.wrn-confetti),
|
||||
.demo-render:has(.wrn-confetti) {
|
||||
justify-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
Vendored
+1
-1
@@ -13,7 +13,7 @@ declare namespace WRNexusGenerated {
|
||||
: never;
|
||||
type RealtimeMessage<T> = T extends import("@wrnexus/core").RoomDefinition<any, infer M> ? M : unknown;
|
||||
type QueuePayload<T> = T extends import("@wrnexus/queue").JobDefinition<infer I> ? I : unknown;
|
||||
type RouteName = "accessibility" | "advanced.forms" | "base" | "block.library" | "blocks" | "blocks.announcement.bar" | "blocks.ctasection" | "blocks.feature.card" | "blocks.feature.grid" | "blocks.feature.icon.card" | "blocks.footer" | "blocks.hero" | "blocks.hero.actions" | "blocks.marketing.section.header" | "blocks.metric.grid" | "blocks.page.header" | "blocks.section.header" | "blocks.split.hero" | "blocks.stats.bar" | "colors" | "components.accordion" | "components.advanced.select" | "components.alert" | "components.avatar" | "components.avatar.group" | "components.back.to.top" | "components.badge" | "components.blockquote" | "components.breadcrumb" | "components.button" | "components.button.group" | "components.card" | "components.carousel" | "components.chart" | "components.chat.bubble" | "components.checkbox" | "components.clipboard" | "components.collapse" | "components.color.picker" | "components.columns" | "components.combo.box" | "components.confetti" | "components.container" | "components.context.menu" | "components.custom.scrollbar" | "components.data.map" | "components.data.table" | "components.date.picker" | "components.device.frame" | "components.divider" | "components.drag.and.drop" | "components.drawer" | "components.dropdown" | "components.file.input" | "components.file.upload.progress" | "components.grid" | "components.image" | "components.input" | "components.input.group" | "components.input.number" | "components.kbd" | "components.layout.splitter" | "components.legend.indicator" | "components.link" | "components.list" | "components.list.group" | "components.map" | "components.marquee" | "components.mega.menu" | "components.metric.card" | "components.modal" | "components.nav" | "components.navbar" | "components.pagination" | "components.pin.input" | "components.popover" | "components.preference.switcher" | "components.progress" | "components.radio" | "components.range.slider" | "components.rating" | "components.scrollspy" | "components.search.box" | "components.section" | "components.select" | "components.sidebar" | "components.skeleton" | "components.spinner" | "components.stepper" | "components.strong.password" | "components.styled.icon" | "components.switch" | "components.tabs" | "components.text.link" | "components.textarea" | "components.time.picker" | "components.timeline" | "components.toaster" | "components.toggle.count" | "components.toggle.password" | "components.tooltip" | "components.tree.view" | "components.typography" | "components.wysiwyg.editor" | "core" | "dark.mode" | "data" | "docs" | "fonts" | "forms" | "framework.guides" | "index" | "installation" | "integrations" | "layout" | "marketing" | "navigation" | "overlays" | "preview" | "preview.custom.modal" | "preview.profile" | "preview.project.board" | "preview.scheduling" | "preview.sign.in" | "preview.workspace" | "resources" | "sizing" | "tables" | "templates" | "templates.commerce" | "templates.dashboards" | "templates.marketing" | "templates.productivity" | "themes" | "v06.functions" | "v06.imports" | "v06.migration" | "v06.outputs" | "v06.runtime" | "v06.state" | "v06.stores" | "v06.types";
|
||||
type RouteName = "accessibility" | "advanced.forms" | "base" | "block.library" | "blocks" | "blocks.announcement.bar" | "blocks.ctasection" | "blocks.feature.card" | "blocks.feature.grid" | "blocks.feature.icon.card" | "blocks.footer" | "blocks.hero" | "blocks.hero.actions" | "blocks.marketing.section.header" | "blocks.metric.grid" | "blocks.page.header" | "blocks.section.header" | "blocks.split.hero" | "blocks.stats.bar" | "colors" | "components.accordion" | "components.advanced.select" | "components.alert" | "components.avatar" | "components.avatar.group" | "components.back.to.top" | "components.badge" | "components.blockquote" | "components.breadcrumb" | "components.button" | "components.button.group" | "components.card" | "components.carousel" | "components.chart" | "components.chat.bubble" | "components.checkbox" | "components.clipboard" | "components.collapse" | "components.color.picker" | "components.columns" | "components.combo.box" | "components.confetti" | "components.container" | "components.context.menu" | "components.custom.scrollbar" | "components.data.map" | "components.data.table" | "components.date.picker" | "components.device.frame" | "components.divider" | "components.drag.and.drop" | "components.drawer" | "components.drawflow.canvas" | "components.dropdown" | "components.file.input" | "components.file.upload.progress" | "components.flow.canvas" | "components.grid" | "components.image" | "components.input" | "components.input.group" | "components.input.number" | "components.kbd" | "components.layout.splitter" | "components.legend.indicator" | "components.link" | "components.list" | "components.list.group" | "components.map" | "components.marquee" | "components.mega.menu" | "components.metric.card" | "components.modal" | "components.nav" | "components.navbar" | "components.pagination" | "components.pin.input" | "components.popover" | "components.preference.switcher" | "components.progress" | "components.radio" | "components.range.slider" | "components.rating" | "components.scrollspy" | "components.search.box" | "components.section" | "components.select" | "components.sidebar" | "components.skeleton" | "components.spinner" | "components.stepper" | "components.strong.password" | "components.styled.icon" | "components.switch" | "components.tabs" | "components.text.link" | "components.textarea" | "components.time.picker" | "components.timeline" | "components.toaster" | "components.toggle.count" | "components.toggle.password" | "components.tooltip" | "components.tree.view" | "components.typography" | "components.wysiwyg.editor" | "core" | "dark.mode" | "data" | "docs" | "fonts" | "forms" | "framework.guides" | "index" | "installation" | "integrations" | "layout" | "marketing" | "navigation" | "overlays" | "preview" | "preview.custom.modal" | "preview.profile" | "preview.project.board" | "preview.scheduling" | "preview.sign.in" | "preview.workspace" | "resources" | "sizing" | "tables" | "templates" | "templates.commerce" | "templates.dashboards" | "templates.marketing" | "templates.productivity" | "themes" | "v06.functions" | "v06.imports" | "v06.migration" | "v06.outputs" | "v06.runtime" | "v06.state" | "v06.stores" | "v06.types";
|
||||
type ApiRoute = "/api/teams";
|
||||
type RealtimeRoute = never;
|
||||
type EnvironmentKey = never;
|
||||
|
||||
@@ -5,21 +5,23 @@
|
||||
"": {
|
||||
"name": "component-showcase",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.16",
|
||||
"@wrnexus/dev-server": "^0.8.66",
|
||||
"@wrnexus/helpers": "^0.8.9",
|
||||
"@wrnexus/plugin": "^0.8.9",
|
||||
"@wrnexus/styles": "^0.8.26",
|
||||
"@wrnexus/syntax": "^0.8.19",
|
||||
"@wrnexus/ui": "^0.8.88",
|
||||
"@wrnexus/core": "0.8.25",
|
||||
"@wrnexus/design-studio": "0.1.0",
|
||||
"@wrnexus/design-system": "0.1.0",
|
||||
"@wrnexus/dev-server": "0.8.83",
|
||||
"@wrnexus/helpers": "0.8.10",
|
||||
"@wrnexus/plugin": "0.8.10",
|
||||
"@wrnexus/styles": "0.8.27",
|
||||
"@wrnexus/syntax": "0.8.20",
|
||||
"@wrnexus/ui": "0.8.118",
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/lucide": "^1.2.123",
|
||||
"@iconify/tailwind4": "^1.2.3",
|
||||
"@tailwindcss/cli": "^4.3.3",
|
||||
"@types/bun": "^1.3.14",
|
||||
"@wrnexus/cli": "^0.8.72",
|
||||
"@wrnexus/compiler": "^0.8.30",
|
||||
"@wrnexus/cli": "0.8.77",
|
||||
"@wrnexus/compiler": "0.8.44",
|
||||
"happy-dom": "^20.11.6",
|
||||
"prettier": "^3.6.2",
|
||||
"tailwindcss": "^4.3.3",
|
||||
@@ -52,6 +54,8 @@
|
||||
|
||||
"@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=="],
|
||||
|
||||
"@kurkle/color": ["@kurkle/color@0.3.4", "", {}, "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="],
|
||||
|
||||
"@noble/hashes": ["@noble/hashes@1.4.0", "", {}, "sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg=="],
|
||||
|
||||
"@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=="],
|
||||
@@ -144,67 +148,73 @@
|
||||
|
||||
"@types/ws": ["@types/ws@8.18.2", "", { "dependencies": { "@types/node": "*" } }, "sha512-67MQl+fpWKVTT1NYdnmo3U4sc/xPo/zQBncVnI74qmQa0z/b+1g6iYqNmGCPbxO+zz2aklb08a0oHfegiVd0/w=="],
|
||||
|
||||
"@wrnexus/authz": ["@wrnexus/authz@0.8.15", "https://registry.workroot.in/repository/npm/@wrnexus/authz/-/authz-0.8.15.tgz", { "dependencies": { "@wrnexus/core": "^0.8.12", "@wrnexus/db": "^0.8.20", "@wrnexus/plugin": "^0.8.8" } }, "sha512-ZV1cvHrOkephfjs/gzzcLkN4HEHSFWJVZVmfsvir/GZs/X7+ZQbPNYUQZV7SsRlyMkUxgTKMCiZ8Ym49eOBSQw=="],
|
||||
"@wrnexus/ai": ["@wrnexus/ai@0.8.10", "https://registry.workroot.in/repository/npm/@wrnexus/ai/-/ai-0.8.10.tgz", {}, "sha512-/vCpdkB4DpTRQ6g7UtwXLx95pWpBTfqvBukNjjRy5/L3hLiIp29n5RzPw+n3kRVhE8uGRCaKc9yUBxlhNKHUMA=="],
|
||||
|
||||
"@wrnexus/cache": ["@wrnexus/cache@0.8.8", "https://registry.workroot.in/repository/npm/@wrnexus/cache/-/cache-0.8.8.tgz", { "dependencies": { "@wrnexus/core": "^0.8.9" } }, "sha512-GSV2myyy8xVeI8LdtJoIffW6fveCqB4WWN0CaodhVpI+4Y2aEmfJ6qwFikf34qI8Fy1+2ca9sKl5t1494kZBvw=="],
|
||||
"@wrnexus/authz": ["@wrnexus/authz@0.8.16", "https://registry.workroot.in/repository/npm/@wrnexus/authz/-/authz-0.8.16.tgz", { "dependencies": { "@wrnexus/core": "^0.8.25", "@wrnexus/db": "^0.8.24", "@wrnexus/plugin": "^0.8.10" } }, "sha512-bKs6X+nAU7w7m4Vvdf92/5ZjZ0MCPRxmCHvHAI376LtYlLVqqiDVRN2j1JWCkPdrvYaXeqsz6DMhPIKdKzS8Zg=="],
|
||||
|
||||
"@wrnexus/cli": ["@wrnexus/cli@0.8.72", "https://registry.workroot.in/repository/npm/@wrnexus/cli/-/cli-0.8.72.tgz", { "dependencies": { "@wrnexus/authz": "^0.8.15", "@wrnexus/compiler": "^0.8.30", "@wrnexus/core": "^0.8.16", "@wrnexus/csr": "^0.8.41", "@wrnexus/db": "^0.8.23", "@wrnexus/dev-server": "^0.8.66", "@wrnexus/i18n": "^0.8.12", "@wrnexus/mcp": "^0.8.8", "@wrnexus/playground": "^0.8.8", "@wrnexus/plugin": "^0.8.9", "@wrnexus/react": "^0.8.9", "@wrnexus/router": "^0.8.10", "@wrnexus/security": "^0.8.9", "@wrnexus/styles": "^0.8.25", "@wrnexus/syntax": "^0.8.19", "@wrnexus/typecheck": "^0.8.17", "@wrnexus/ui": "^0.8.85", "@wrnexus/validation": "^0.8.13", "selfsigned": "^5.5.0" }, "bin": { "wrnexus": "dist/index.js" } }, "sha512-JeFsDMldcjiUFMhal11V/bfg/dNcG+OJh7+Bt6lmU3ojxTajvxV6pjLPp022hYDBZPu83jupiF4WZPwOLy/+Bw=="],
|
||||
"@wrnexus/cache": ["@wrnexus/cache@0.8.9", "https://registry.workroot.in/repository/npm/@wrnexus/cache/-/cache-0.8.9.tgz", { "dependencies": { "@wrnexus/core": "^0.8.25" } }, "sha512-NftsbOsRtKCV77xxqNENIeUgcJjDgWuZL8KjxYJOdc6vVevoJ/fWU/EprqIuZ6YNtqm7TFFqMEENpb6GLvidGg=="],
|
||||
|
||||
"@wrnexus/compiler": ["@wrnexus/compiler@0.8.30", "https://registry.workroot.in/repository/npm/@wrnexus/compiler/-/compiler-0.8.30.tgz", { "dependencies": { "@wrnexus/csr": "^0.8.41", "@wrnexus/store": "^0.8.12", "@wrnexus/syntax": "^0.8.19", "@wrnexus/validation": "^0.8.13" } }, "sha512-zsxqcIMOzXxX98z6RFffwQUa6VuniOqGZO/vxDdOJiyJ8RTs7gOk8dsBhA6MTLQ1fafPxJPV3zkGotKXOuxhCQ=="],
|
||||
"@wrnexus/cli": ["@wrnexus/cli@0.8.77", "https://registry.workroot.in/repository/npm/@wrnexus/cli/-/cli-0.8.77.tgz", { "dependencies": { "@wrnexus/authz": "^0.8.16", "@wrnexus/compiler": "^0.8.44", "@wrnexus/core": "^0.8.25", "@wrnexus/csr": "^0.8.74", "@wrnexus/db": "^0.8.24", "@wrnexus/design-system": "^0.1.0", "@wrnexus/dev-server": "^0.8.83", "@wrnexus/i18n": "^0.8.13", "@wrnexus/mcp": "^0.8.9", "@wrnexus/playground": "^0.8.9", "@wrnexus/plugin": "^0.8.10", "@wrnexus/react": "^0.8.10", "@wrnexus/router": "^0.8.11", "@wrnexus/security": "^0.8.10", "@wrnexus/styles": "^0.8.27", "@wrnexus/syntax": "^0.8.20", "@wrnexus/typecheck": "^0.8.18", "@wrnexus/ui": "^0.8.118", "@wrnexus/validation": "^0.8.14", "selfsigned": "^5.5.0" }, "bin": { "wrnexus": "dist/index.js" } }, "sha512-zFkifdFVwkcja9H8ctEZMPD5khBqmhp32yqSGjBvJnfuFCBdaRB9U5uCkqBbPCQUELrqTvCG2lafvQaptBo8xQ=="],
|
||||
|
||||
"@wrnexus/core": ["@wrnexus/core@0.8.16", "https://registry.workroot.in/repository/npm/@wrnexus/core/-/core-0.8.16.tgz", {}, "sha512-lTNigmTpJsgQnB95xMhalJ6Xbp/QBUf9J0MM4cuiecZ1DQLpaSgGC12Sn7FIC46rTU4w8878XJXlVWDCabe16Q=="],
|
||||
"@wrnexus/compiler": ["@wrnexus/compiler@0.8.44", "https://registry.workroot.in/repository/npm/@wrnexus/compiler/-/compiler-0.8.44.tgz", { "dependencies": { "@wrnexus/csr": "^0.8.74", "@wrnexus/store": "^0.8.13", "@wrnexus/syntax": "^0.8.20", "@wrnexus/validation": "^0.8.14" } }, "sha512-TJ3qPfD+2VsmpuVXgA6CUIlv2fqU2tW8xrIvHUFkGYJpVzF5jbSBUsoHNDfCT9/t5gw3CGazJnPqgzdcIm5XCg=="],
|
||||
|
||||
"@wrnexus/csr": ["@wrnexus/csr@0.8.43", "https://registry.workroot.in/repository/npm/@wrnexus/csr/-/csr-0.8.43.tgz", { "dependencies": { "@wrnexus/core": "^0.8.12" } }, "sha512-czmxeLxvNvD7XjU3TufFBGMzuDWpNB0qpYbmbiARB7l6rslBw3+GuBWf2U5k4DH6oYiN/DGD6Jj+/G3bEh6ARw=="],
|
||||
"@wrnexus/core": ["@wrnexus/core@0.8.25", "https://registry.workroot.in/repository/npm/@wrnexus/core/-/core-0.8.25.tgz", {}, "sha512-od4TyDIKoX0RhjTDq+1HJ5fGQPID04Ao+BvWEkJU0beWRbXLZ6u5iRsh58+h/T2so8NSI9sW4rorC4N+BSMaqQ=="],
|
||||
|
||||
"@wrnexus/db": ["@wrnexus/db@0.8.23", "https://registry.workroot.in/repository/npm/@wrnexus/db/-/db-0.8.23.tgz", {}, "sha512-ncZlvclHW98Enah9wlHOf9+StoVGLrCOCVBAOEFdZKV91vKnYDltcFlmG7i7crndN37kayyb319Wiwol8Hmhyg=="],
|
||||
"@wrnexus/csr": ["@wrnexus/csr@0.8.74", "https://registry.workroot.in/repository/npm/@wrnexus/csr/-/csr-0.8.74.tgz", { "dependencies": { "@wrnexus/core": "^0.8.12" } }, "sha512-hqU7zqWRlkiOxJ8Ke9YidqwRN/CvmvozsK24XPsnlo7zt1IpNma0Woo9J5ZnO3MO9ihVU4sa8tmg61ucKHFFpQ=="],
|
||||
|
||||
"@wrnexus/dev-server": ["@wrnexus/dev-server@0.8.66", "https://registry.workroot.in/repository/npm/@wrnexus/dev-server/-/dev-server-0.8.66.tgz", { "dependencies": { "@wrnexus/authz": "^0.8.15", "@wrnexus/cache": "^0.8.8", "@wrnexus/compiler": "^0.8.30", "@wrnexus/core": "^0.8.16", "@wrnexus/csr": "^0.8.41", "@wrnexus/db": "^0.8.23", "@wrnexus/dev-toolbar": "^0.8.18", "@wrnexus/i18n": "^0.8.12", "@wrnexus/observability": "^0.8.8", "@wrnexus/plugin": "^0.8.9", "@wrnexus/pubsub": "^0.8.9", "@wrnexus/pwa": "^0.8.12", "@wrnexus/queue": "^0.8.14", "@wrnexus/react": "^0.8.9", "@wrnexus/router": "^0.8.10", "@wrnexus/rpc": "^0.8.10", "@wrnexus/security": "^0.8.9", "@wrnexus/ssr": "^0.8.12", "@wrnexus/store": "^0.8.12", "@wrnexus/styles": "^0.8.23", "@wrnexus/ui": "^0.8.84", "@wrnexus/uploader": "^0.8.13", "@wrnexus/validation": "^0.8.13" } }, "sha512-RBJWyUEGmOS6ZgIm5NvNPB4BVhVIpGFEEf4NSLDKJtp/Z5K2+G44KbRhZaaYvl6F4IEZM2Zg5x+ZAX+o5XB34w=="],
|
||||
"@wrnexus/db": ["@wrnexus/db@0.8.24", "https://registry.workroot.in/repository/npm/@wrnexus/db/-/db-0.8.24.tgz", {}, "sha512-zLT7e+C1nWhYs3BnqEjEO0QSli0JNl5sSnSHObjSX0C+wty30ASWD1WyBnfu9xFjOFn1eucZGthzo1xdGGQ1TQ=="],
|
||||
|
||||
"@wrnexus/dev-toolbar": ["@wrnexus/dev-toolbar@0.8.18", "https://registry.workroot.in/repository/npm/@wrnexus/dev-toolbar/-/dev-toolbar-0.8.18.tgz", {}, "sha512-7mj/FLIhLjx/DxH/gUlYwZqm63o/rcwH/0K/K6Efxvu9zfM5OyAh2w3L2eDWI9asK5foZkit8cKMUXVgmqHkcA=="],
|
||||
"@wrnexus/design-studio": ["@wrnexus/design-studio@0.1.0", "https://registry.workroot.in/repository/npm/@wrnexus/design-studio/-/design-studio-0.1.0.tgz", { "dependencies": { "@wrnexus/ai": "^0.8.10", "@wrnexus/compiler": "^0.8.44", "@wrnexus/core": "^0.8.25", "@wrnexus/csr": "^0.8.74", "@wrnexus/design-system": "^0.1.0", "@wrnexus/ssr": "^0.8.20", "@wrnexus/styles": "^0.8.27", "@wrnexus/ui": "^0.8.118" }, "bin": { "wrnexus-design-studio": "dist/cli.js" } }, "sha512-HeY3zG45oEvsLy1my9nCgKHb11ip9eTthhp/bzeOIXEn8vk71pRhqdgrltEwn2vFKIlKuPBQlA4xftmLDhSWTQ=="],
|
||||
|
||||
"@wrnexus/helpers": ["@wrnexus/helpers@0.8.9", "https://registry.workroot.in/repository/npm/@wrnexus/helpers/-/helpers-0.8.9.tgz", { "dependencies": { "@wrnexus/authz": "^0.8.14", "@wrnexus/core": "^0.8.12", "@wrnexus/db": "^0.8.20" } }, "sha512-EzT9LSZJXIAIm2fO62BMbPJOnrloC1lujW+5UNsSd4kj44mBt6WMpBwaCSDGUcVy2/b7GKXlgBnUVZtIIGn0gw=="],
|
||||
"@wrnexus/design-system": ["@wrnexus/design-system@0.1.0", "https://registry.workroot.in/repository/npm/@wrnexus/design-system/-/design-system-0.1.0.tgz", {}, "sha512-gNH/B+kYYZy+Pvlvl3gXoQZlTS6iP/teXct2MoClmsGp6M1vKa8IEptVXKs7po3E83zj5kSh3FIXwcBJHtZqLg=="],
|
||||
|
||||
"@wrnexus/i18n": ["@wrnexus/i18n@0.8.12", "https://registry.workroot.in/repository/npm/@wrnexus/i18n/-/i18n-0.8.12.tgz", { "dependencies": { "@wrnexus/core": "^0.8.9", "@wrnexus/plugin": "^0.8.8", "@wrnexus/ui": "^0.8.19" } }, "sha512-pgDJZpS8qB3tz+FMY+CNUF7AZXJVRFWbFDSHk+QMeUAwkU7JbNDxwmKioa6QU50F6C0SUMbfVwDR3kBXZKBflQ=="],
|
||||
"@wrnexus/dev-server": ["@wrnexus/dev-server@0.8.83", "https://registry.workroot.in/repository/npm/@wrnexus/dev-server/-/dev-server-0.8.83.tgz", { "dependencies": { "@wrnexus/authz": "^0.8.16", "@wrnexus/cache": "^0.8.9", "@wrnexus/compiler": "^0.8.44", "@wrnexus/core": "^0.8.25", "@wrnexus/csr": "^0.8.74", "@wrnexus/db": "^0.8.24", "@wrnexus/dev-toolbar": "^0.8.19", "@wrnexus/i18n": "^0.8.13", "@wrnexus/observability": "^0.8.9", "@wrnexus/plugin": "^0.8.10", "@wrnexus/pubsub": "^0.8.10", "@wrnexus/pwa": "^0.8.13", "@wrnexus/queue": "^0.8.15", "@wrnexus/react": "^0.8.10", "@wrnexus/router": "^0.8.11", "@wrnexus/rpc": "^0.8.11", "@wrnexus/security": "^0.8.10", "@wrnexus/ssr": "^0.8.20", "@wrnexus/store": "^0.8.13", "@wrnexus/styles": "^0.8.27", "@wrnexus/ui": "^0.8.118", "@wrnexus/uploader": "^0.8.14", "@wrnexus/validation": "^0.8.14" } }, "sha512-Ue6Q2KF7nZycvghRvWQBC9PA0DZ2aE+8fC3FaIFMkbID9HLK64Xe+MgMnLDJvQ7mlBJlC+9Ztj8yOYqSavtq1g=="],
|
||||
|
||||
"@wrnexus/jwt": ["@wrnexus/jwt@0.8.9", "https://registry.workroot.in/repository/npm/@wrnexus/jwt/-/jwt-0.8.9.tgz", { "dependencies": { "@wrnexus/core": "^0.8.9" } }, "sha512-LcjXLdDp8pnJ3F6dDGlB3COlvg7jVBIZe+UnF48i7Hy12gHZu0Rbv/iBn9w203tpzT2EmcpGtMyI/J+uLQUeVg=="],
|
||||
"@wrnexus/dev-toolbar": ["@wrnexus/dev-toolbar@0.8.19", "https://registry.workroot.in/repository/npm/@wrnexus/dev-toolbar/-/dev-toolbar-0.8.19.tgz", {}, "sha512-Rfl94o7Tkd9KpwB7RO13DPm7vrqSjaHE5AFyiNL9ypKEXWJhvQf6yvQ6NvlU0gy8j119Fgqg+zBUkVN16QZVMA=="],
|
||||
|
||||
"@wrnexus/mcp": ["@wrnexus/mcp@0.8.8", "https://registry.workroot.in/repository/npm/@wrnexus/mcp/-/mcp-0.8.8.tgz", { "bin": { "wrnexus-mcp": "dist/stdio.js" } }, "sha512-E4Rz03RVjzyjTdwL9d2zzMKLIkyTw1DMcwiRrdAcAEk6/HYJr4rnttiIGcw1lu58ptrLM/lUeqYWEWV+SyDXcQ=="],
|
||||
"@wrnexus/helpers": ["@wrnexus/helpers@0.8.10", "https://registry.workroot.in/repository/npm/@wrnexus/helpers/-/helpers-0.8.10.tgz", { "dependencies": { "@wrnexus/authz": "^0.8.16", "@wrnexus/core": "^0.8.25", "@wrnexus/db": "^0.8.24" } }, "sha512-uwH83Mc0qqfE2eEYu5NNMYhhGB4xvUd2WPaY3B7RlV7RwR/SXNcmr0Ei76KPNhYWzhLO6bx5bWDlFuWENm1BoQ=="],
|
||||
|
||||
"@wrnexus/observability": ["@wrnexus/observability@0.8.8", "https://registry.workroot.in/repository/npm/@wrnexus/observability/-/observability-0.8.8.tgz", { "dependencies": { "@wrnexus/core": "^0.8.9" } }, "sha512-P7R4IYm7o6OfP1TmQ6L537DAOMH5WbC74TP4rw/Stwx8RxS/ORYPWw0mGB8f+1eamOV40Y5U4E04nmf3Tugj0Q=="],
|
||||
"@wrnexus/i18n": ["@wrnexus/i18n@0.8.13", "https://registry.workroot.in/repository/npm/@wrnexus/i18n/-/i18n-0.8.13.tgz", { "dependencies": { "@wrnexus/core": "^0.8.25", "@wrnexus/plugin": "^0.8.10", "@wrnexus/ui": "^0.8.118" } }, "sha512-Go4JT+mc/SYnqWiv0ha+7/NLLPY/1HVFbCz8m2oLwtYKMrsZtn62Ows4uW54fzTY3fp8RkaVxDgkiC2p2jA1tw=="],
|
||||
|
||||
"@wrnexus/playground": ["@wrnexus/playground@0.8.8", "https://registry.workroot.in/repository/npm/@wrnexus/playground/-/playground-0.8.8.tgz", { "dependencies": { "@wrnexus/compiler": "^0.8.10", "@wrnexus/syntax": "^0.8.9" } }, "sha512-FpQ2n81GWSJSc0LccH6zDYm0pfdUk54LdDYma0Y72pyLfRjSY0ymQJcCr6Jp/EE5iBIhRowD6ag7vd26h27pZA=="],
|
||||
"@wrnexus/jwt": ["@wrnexus/jwt@0.8.10", "https://registry.workroot.in/repository/npm/@wrnexus/jwt/-/jwt-0.8.10.tgz", { "dependencies": { "@wrnexus/core": "^0.8.25" } }, "sha512-axXx1aCrIgpNhJyreKDQ78IlqGH+3AeKtfEW+/pzPFUXU03DU/YdCasK+WcZYYAQPPcZnegJA9MP9cYZYAFBCQ=="],
|
||||
|
||||
"@wrnexus/plugin": ["@wrnexus/plugin@0.8.9", "https://registry.workroot.in/repository/npm/@wrnexus/plugin/-/plugin-0.8.9.tgz", { "dependencies": { "@wrnexus/syntax": "^0.8.19" } }, "sha512-XpkQL4/MpiNxoNcH1l7dL5cYEu8HN54/b5bx6DBXWutU4tMrAjChtbJ+SsE2YrNve4uWVUhF8wPgsdBrJONOQQ=="],
|
||||
"@wrnexus/mcp": ["@wrnexus/mcp@0.8.9", "https://registry.workroot.in/repository/npm/@wrnexus/mcp/-/mcp-0.8.9.tgz", { "peerDependencies": { "@wrnexus/design-studio": "^0.1.0" }, "optionalPeers": ["@wrnexus/design-studio"], "bin": { "wrnexus-mcp": "dist/stdio.js" } }, "sha512-OVSL2ZZeTh6pwuQiWK4gjTLDVfzu4INuf5PvMjyynzphXwsFWpL5m8BvVD4or4R9Jvm/R8WAhHIO8gLWZHF1oA=="],
|
||||
|
||||
"@wrnexus/pubsub": ["@wrnexus/pubsub@0.8.9", "https://registry.workroot.in/repository/npm/@wrnexus/pubsub/-/pubsub-0.8.9.tgz", { "dependencies": { "@wrnexus/core": "^0.8.9", "@wrnexus/rpc": "^0.8.9" } }, "sha512-Z696WHuzJsPJvkvz3aRcifiZEqHXSIzoH3ji/wPqBP+vqmKIiZ/WIzViSQ0j8QJgtHiiq1mo2d4GFxsfdAPbqg=="],
|
||||
"@wrnexus/observability": ["@wrnexus/observability@0.8.9", "https://registry.workroot.in/repository/npm/@wrnexus/observability/-/observability-0.8.9.tgz", { "dependencies": { "@wrnexus/core": "^0.8.25" } }, "sha512-f+kUNBATorCxKl04HsNuQi7o8pOgyW8qpfljWsFgauIdYxtTDFSxCERZIlprHyvin5l5ffAKFZcXeSutGqiPgQ=="],
|
||||
|
||||
"@wrnexus/pwa": ["@wrnexus/pwa@0.8.12", "https://registry.workroot.in/repository/npm/@wrnexus/pwa/-/pwa-0.8.12.tgz", {}, "sha512-XI5wgn+vbPcSbAt3EsqnrPjkx2cd/Zpo3xy2deawuU5k7irkRImPNUWvtjkTar5GaNedVvuZQAhXLghb9p/GQQ=="],
|
||||
"@wrnexus/playground": ["@wrnexus/playground@0.8.9", "https://registry.workroot.in/repository/npm/@wrnexus/playground/-/playground-0.8.9.tgz", { "dependencies": { "@wrnexus/compiler": "^0.8.44", "@wrnexus/syntax": "^0.8.20" } }, "sha512-hQCmKoi6gthyYLZDtvcDJFwq5THuxIWDijltDWTDOe9Gy7WdVn9UhrRVEFFYZ6VLtBRXAxnzlGb7eqJAMBKTaA=="],
|
||||
|
||||
"@wrnexus/queue": ["@wrnexus/queue@0.8.14", "https://registry.workroot.in/repository/npm/@wrnexus/queue/-/queue-0.8.14.tgz", { "dependencies": { "@wrnexus/core": "^0.8.12", "@wrnexus/db": "^0.8.20", "@wrnexus/rpc": "^0.8.10" } }, "sha512-uulbyU1AF3gnfylmlFMIoBjAKgAgHsHg+FfEmLtoYwsaQ+JtMNk5PEZ/GUUBxEmK9ZbEAdgBAxgEX69E7ne9aA=="],
|
||||
"@wrnexus/plugin": ["@wrnexus/plugin@0.8.10", "https://registry.workroot.in/repository/npm/@wrnexus/plugin/-/plugin-0.8.10.tgz", { "dependencies": { "@wrnexus/syntax": "^0.8.20" } }, "sha512-YVSLW8Lzq3/eFzAOj9B2A6ngFvdm2jmzSCEd2tI491rGqLbQWyFx3NzCuN/CnAZOA3kyHE+W4oiG6/3cyWWZsg=="],
|
||||
|
||||
"@wrnexus/react": ["@wrnexus/react@0.8.9", "https://registry.workroot.in/repository/npm/@wrnexus/react/-/react-0.8.9.tgz", { "dependencies": { "@wrnexus/store": "^0.8.8" } }, "sha512-031RC/EBF1nzSeiwo2gXhOJ+xMLRtPUniN612ZVzj+pqGdn1J8I8vajZwRYKYC2xAVdCiB/EGoZ3FQaT75h8qw=="],
|
||||
"@wrnexus/pubsub": ["@wrnexus/pubsub@0.8.10", "https://registry.workroot.in/repository/npm/@wrnexus/pubsub/-/pubsub-0.8.10.tgz", { "dependencies": { "@wrnexus/core": "^0.8.25", "@wrnexus/rpc": "^0.8.11" } }, "sha512-X0ZEEvcSjUqvNT49vyYTmxgtEiQl6l8gFPfkbWWixsvAGQO55QGjZCvtUu/R0ItJ+1an45DKx9R4Z6K7ppqcUQ=="],
|
||||
|
||||
"@wrnexus/router": ["@wrnexus/router@0.8.10", "https://registry.workroot.in/repository/npm/@wrnexus/router/-/router-0.8.10.tgz", { "dependencies": { "@wrnexus/compiler": "^0.8.17", "@wrnexus/core": "^0.8.12" } }, "sha512-zh+h+VDNshSsh2iryqbOCWOhcIbKXg58iWkHz3wKNovlWT0uAgLhmea6IHsiApI8RC/VPw4TAmAhfkaK1c4BBA=="],
|
||||
"@wrnexus/pwa": ["@wrnexus/pwa@0.8.13", "https://registry.workroot.in/repository/npm/@wrnexus/pwa/-/pwa-0.8.13.tgz", {}, "sha512-u4D8jfI5ZHJbZrOTfeEJ9CTq+wCTqJ7ZjoRlTddf1RnAV/w8d6Vg72KDy6ApdoNuiJMqHRu44nqK053UyP00Sw=="],
|
||||
|
||||
"@wrnexus/rpc": ["@wrnexus/rpc@0.8.10", "https://registry.workroot.in/repository/npm/@wrnexus/rpc/-/rpc-0.8.10.tgz", { "dependencies": { "@wrnexus/core": "^0.8.9", "@wrnexus/helpers": "^0.8.8", "@wrnexus/jwt": "^0.8.9", "@wrnexus/validation": "^0.8.10" } }, "sha512-KbfSxEe0D0ZiM1CckxiEVIEBSzYRYb3iEJYyJnT8DqlrEpos1hCwT22XnTMC3ldsCAusoUPO5gTXMBXL9qMKDQ=="],
|
||||
"@wrnexus/queue": ["@wrnexus/queue@0.8.15", "https://registry.workroot.in/repository/npm/@wrnexus/queue/-/queue-0.8.15.tgz", { "dependencies": { "@wrnexus/core": "^0.8.25", "@wrnexus/db": "^0.8.24", "@wrnexus/rpc": "^0.8.11" } }, "sha512-xJPZUqxYRMEgrgPIZoaZRMDWwwB8rUu0mrizNAGoZIwz1BzPsdVJaXOhsFvZd/mkHgk1CupxYXMNHuYA2pRGDg=="],
|
||||
|
||||
"@wrnexus/security": ["@wrnexus/security@0.8.9", "https://registry.workroot.in/repository/npm/@wrnexus/security/-/security-0.8.9.tgz", { "dependencies": { "@wrnexus/core": "^0.8.11" } }, "sha512-dgz2fYwiw7uhBdsMuLqlPQaqajJx1McTjAhx8Pp1lf8gddsXm+Dnmri/1LXSbPwuSpWB7gsNq326JlVICfipVQ=="],
|
||||
"@wrnexus/react": ["@wrnexus/react@0.8.10", "https://registry.workroot.in/repository/npm/@wrnexus/react/-/react-0.8.10.tgz", { "dependencies": { "@wrnexus/store": "^0.8.13" }, "peerDependencies": { "react": "^19.0.0", "react-dom": "^19.0.0" }, "optionalPeers": ["react", "react-dom"] }, "sha512-n5mdbb7ZWxOylL4I28GCEjLSFArPLNB8pCEIT3CxYXQQXkHgGXNS+++ls6R1XwnTrGLUJfVECpzRmf6mfeszUQ=="],
|
||||
|
||||
"@wrnexus/ssr": ["@wrnexus/ssr@0.8.12", "https://registry.workroot.in/repository/npm/@wrnexus/ssr/-/ssr-0.8.12.tgz", { "dependencies": { "@wrnexus/core": "^0.8.16", "@wrnexus/security": "^0.8.9", "@wrnexus/store": "^0.8.12" } }, "sha512-fPoxMfnlwuUs6syJ6LMjqzxIKGsghQ3UCKjSFkRXlvdwdPpWRSxW0g0+jJF66/OTyCo2kB0dwMRGVLhICLgvLw=="],
|
||||
"@wrnexus/router": ["@wrnexus/router@0.8.11", "https://registry.workroot.in/repository/npm/@wrnexus/router/-/router-0.8.11.tgz", { "dependencies": { "@wrnexus/compiler": "^0.8.44", "@wrnexus/core": "^0.8.25" } }, "sha512-9hry5s0GQ0RdBXWue3I6JBijZMHcO+7J9oJnKqwPD2zScHdmU8ooJ4LyuI9kqf9Wc22Zl9Whgp/OjxGMa8aRtw=="],
|
||||
|
||||
"@wrnexus/store": ["@wrnexus/store@0.8.12", "https://registry.workroot.in/repository/npm/@wrnexus/store/-/store-0.8.12.tgz", {}, "sha512-5AiJXZ6AFT2eshp21JEyeHlmBgHuxyeRslN6YZiIvUfoO4Dre3VtR4pI+hN3lOGloLXwXBUfEMm2mgGsXS36Kg=="],
|
||||
"@wrnexus/rpc": ["@wrnexus/rpc@0.8.11", "https://registry.workroot.in/repository/npm/@wrnexus/rpc/-/rpc-0.8.11.tgz", { "dependencies": { "@wrnexus/core": "^0.8.25", "@wrnexus/helpers": "^0.8.10", "@wrnexus/jwt": "^0.8.10", "@wrnexus/validation": "^0.8.14" } }, "sha512-SKxM0ACMsz3MQ7J0tYam2ZlE6WI3immFgak/bxtdwarMM6CVV6t3zxq/zw5EGfeWuCQxmTefOpvaTuhvzgKf5A=="],
|
||||
|
||||
"@wrnexus/styles": ["@wrnexus/styles@0.8.26", "https://registry.workroot.in/repository/npm/@wrnexus/styles/-/styles-0.8.26.tgz", { "dependencies": { "@wrnexus/core": "^0.8.16", "@wrnexus/plugin": "^0.8.9", "@wrnexus/uploader": "^0.8.13" } }, "sha512-B1FgQYks6S9SohlWjDkRabbzAAW9IIKbR5rHrdXegr6QY3nQMtJYPMG8xUVMTpQ8gRL+GODtuhDYPHD/igHuPg=="],
|
||||
"@wrnexus/security": ["@wrnexus/security@0.8.10", "https://registry.workroot.in/repository/npm/@wrnexus/security/-/security-0.8.10.tgz", { "dependencies": { "@wrnexus/core": "^0.8.25" } }, "sha512-DRPI1TpMbVNtx91jnsIHN+ONvNs6RYKW5hot8Gez6y/XRliksAQAv4qPlW3V/Jctzsfue7Bz0qhERtqcnUzKPw=="],
|
||||
|
||||
"@wrnexus/syntax": ["@wrnexus/syntax@0.8.19", "https://registry.workroot.in/repository/npm/@wrnexus/syntax/-/syntax-0.8.19.tgz", {}, "sha512-/OZ+Z/cdFmfqKeqCZZpmwN2ZRSITA2ByqmVjGVONtMRfxHBj99T5jB0be6qlxrmoK0cgntRxEe2JCS/d9h54YA=="],
|
||||
"@wrnexus/ssr": ["@wrnexus/ssr@0.8.20", "https://registry.workroot.in/repository/npm/@wrnexus/ssr/-/ssr-0.8.20.tgz", { "dependencies": { "@wrnexus/core": "^0.8.25", "@wrnexus/security": "^0.8.10", "@wrnexus/store": "^0.8.13" } }, "sha512-0+I9C9Mjtpk8IeOfU+TIPo4/Wb1r3TC+xZBytj0v1Sper8IWSGw0At6opbJMnw5PPERnsQC0XJDhcSVlj2Wbuw=="],
|
||||
|
||||
"@wrnexus/typecheck": ["@wrnexus/typecheck@0.8.17", "https://registry.workroot.in/repository/npm/@wrnexus/typecheck/-/typecheck-0.8.17.tgz", { "dependencies": { "@wrnexus/syntax": "^0.8.19", "typescript": "^6.0.3" } }, "sha512-sEvCraG7qudT61h0SbuccIegi37nVWW2B1+BjmPg6Zrtc0251lUozASOYMW2ntjiizASDXMTSnZvSJ36EJPflA=="],
|
||||
"@wrnexus/store": ["@wrnexus/store@0.8.13", "https://registry.workroot.in/repository/npm/@wrnexus/store/-/store-0.8.13.tgz", {}, "sha512-EHfjbs3qcVVFA5QkLDubH8bBdVWHAinx+5GYeo7asYSs/4qcfd6K0X0bsXp73FVm3CHgGeN9I+Ih6bNJmAEEWQ=="],
|
||||
|
||||
"@wrnexus/ui": ["@wrnexus/ui@0.8.88", "https://registry.workroot.in/repository/npm/@wrnexus/ui/-/ui-0.8.88.tgz", { "dependencies": { "@wrnexus/core": "^0.8.16" } }, "sha512-C6q3c85tJm0Ajhgb8i+DYOWyICNxeXVsR3KbD5yP0rC2XS5Vj9TP72x7NPux798jGLpbOpSPRiIPUff7zAod7w=="],
|
||||
"@wrnexus/styles": ["@wrnexus/styles@0.8.27", "https://registry.workroot.in/repository/npm/@wrnexus/styles/-/styles-0.8.27.tgz", { "dependencies": { "@wrnexus/core": "^0.8.25", "@wrnexus/design-system": "^0.1.0", "@wrnexus/plugin": "^0.8.10", "@wrnexus/uploader": "^0.8.14" } }, "sha512-2DTZycU9LVaEn5/7ZsV87LDgDcm1fht6MHXp+alTBmlmkJ2tjeJnJm2wiMydStWKjf8E3AKAhZWg/3f2wOGi1g=="],
|
||||
|
||||
"@wrnexus/uploader": ["@wrnexus/uploader@0.8.13", "https://registry.workroot.in/repository/npm/@wrnexus/uploader/-/uploader-0.8.13.tgz", { "dependencies": { "@wrnexus/core": "^0.8.12", "@wrnexus/plugin": "^0.8.8", "@wrnexus/ui": "^0.8.23" } }, "sha512-Cfj5Iqtbk/ccXV/YXQ4I8v0GkcE7cFnzMEB33qy3DcWo4fA5ndiWU9CN4Ap1oysA5MWEmcCKuJlcTKdWLhiTvw=="],
|
||||
"@wrnexus/syntax": ["@wrnexus/syntax@0.8.20", "https://registry.workroot.in/repository/npm/@wrnexus/syntax/-/syntax-0.8.20.tgz", {}, "sha512-vd3EQLjLeNnnlSRVUMY4m+VksKpUHfTla0eWSZ8N+GroEVDgYegHW79tWcRAlmCxPe/jrpUSGri6dZoty2b72A=="],
|
||||
|
||||
"@wrnexus/validation": ["@wrnexus/validation@0.8.13", "https://registry.workroot.in/repository/npm/@wrnexus/validation/-/validation-0.8.13.tgz", { "dependencies": { "@wrnexus/core": "^0.8.12", "@wrnexus/plugin": "^0.8.8", "@wrnexus/ui": "^0.8.76" } }, "sha512-ud9bzeSaOzbYnmu6pKEr5XbBT25FW+ROOI9iB0YJBc624juurslgHm2lpmpOu2WKUWulgktb/2vl9nsvtI8pSw=="],
|
||||
"@wrnexus/typecheck": ["@wrnexus/typecheck@0.8.18", "https://registry.workroot.in/repository/npm/@wrnexus/typecheck/-/typecheck-0.8.18.tgz", { "dependencies": { "@wrnexus/syntax": "^0.8.20", "typescript": "^6.0.3" } }, "sha512-oS5x6hUs6VUNEupDARzFTzXvvdRAV6l8nO3wi+5rdfeDIDSz/5QNeQfVwzJg7SDGVkuTVOHH8lqyiMtSW+8Nbg=="],
|
||||
|
||||
"@wrnexus/ui": ["@wrnexus/ui@0.8.118", "https://registry.workroot.in/repository/npm/@wrnexus/ui/-/ui-0.8.118.tgz", { "dependencies": { "@wrnexus/core": "^0.8.25", "@wrnexus/design-system": "^0.1.0", "@wrnexus/plugin": "^0.8.10", "chart.js": "^4.5.1", "drawflow": "0.0.60" } }, "sha512-a0RWv3P+Z0f19Pqvaq+mHcBrAYni1k8iXQKMf9r83rYp3m6V4e00Fahg661VcF4Y6o3SAn151YVTH3zrRwsaWw=="],
|
||||
|
||||
"@wrnexus/uploader": ["@wrnexus/uploader@0.8.14", "https://registry.workroot.in/repository/npm/@wrnexus/uploader/-/uploader-0.8.14.tgz", { "dependencies": { "@wrnexus/core": "^0.8.25", "@wrnexus/plugin": "^0.8.10", "@wrnexus/ui": "^0.8.118" } }, "sha512-LticgG17uYu65IYRNDGagtvjfdUNrVHR2drbv6r/J4pycNX6CcGGn0hbjZFPA1uSHfH/hp//hA+KTOcoE14aMQ=="],
|
||||
|
||||
"@wrnexus/validation": ["@wrnexus/validation@0.8.14", "https://registry.workroot.in/repository/npm/@wrnexus/validation/-/validation-0.8.14.tgz", { "dependencies": { "@wrnexus/core": "^0.8.25", "@wrnexus/plugin": "^0.8.10", "@wrnexus/ui": "^0.8.118" } }, "sha512-cdy8soKgKqGI3FP1wvbHsmdKAnDAzN6h0LcUadgjqz9sfp7RSsYuFBxEw/lkZiWkUbBbAuAaQ/sI7FgXWDnPxg=="],
|
||||
|
||||
"asn1js": ["asn1js@3.0.10", "", { "dependencies": { "pvtsutils": "^1.3.6", "pvutils": "^1.1.5", "tslib": "^2.8.1" } }, "sha512-S2s3aOytiKdFRdulw2qPE51MzjzVOisppcVv7jVFR+Kw0kxwvFrDcYA0h7Ndqbmj0HkMIXYWaoj7fli8kgx1eg=="],
|
||||
|
||||
@@ -218,6 +228,8 @@
|
||||
|
||||
"bytestreamjs": ["bytestreamjs@2.0.1", "", {}, "sha512-U1Z/ob71V/bXfVABvNr/Kumf5VyeQRBEm6Txb0PQ6S7V5GpBM3w4Cbqz/xPDicR5tN0uvDifng8C+5qECeGwyQ=="],
|
||||
|
||||
"chart.js": ["chart.js@4.5.1", "", { "dependencies": { "@kurkle/color": "^0.3.0" } }, "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw=="],
|
||||
|
||||
"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=="],
|
||||
@@ -238,6 +250,8 @@
|
||||
|
||||
"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=="],
|
||||
|
||||
"drawflow": ["drawflow@0.0.60", "", {}, "sha512-UGj1+1DnWCVY6vJXBb6Ayt7KpPINBGqncVqpYDumVeBdIKxlBGn0tksp2yciVzQjkYsjFwMMDEdoVyWzUa2wkA=="],
|
||||
|
||||
"enhanced-resolve": ["enhanced-resolve@5.24.3", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.3.3" } }, "sha512-PwKooW9JUzh5chmYfHM3IQl5OkK2u2Nm011MgeZrss3JmFraUx/fqrf78kk8GUMYoibx/14MdwTl/1WKkG7TpQ=="],
|
||||
|
||||
"entities": ["entities@7.0.1", "", {}, "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA=="],
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
# Include INSIDE the existing component site's nginx server block.
|
||||
# The existing location / continues to proxy the component app on its usual port.
|
||||
location = /design-studio {
|
||||
return 308 /design-studio/;
|
||||
}
|
||||
location /design-studio/ {
|
||||
# Preserve the path and the external Host so same-origin validation works.
|
||||
proxy_pass http://127.0.0.1:4320;
|
||||
proxy_set_header Host $http_host;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_http_version 1.1;
|
||||
proxy_read_timeout 60s;
|
||||
client_max_body_size 2m;
|
||||
}
|
||||
Generated
+283
-191
@@ -1,28 +1,30 @@
|
||||
{
|
||||
"name": "component-showcase",
|
||||
"version": "0.8.7",
|
||||
"version": "0.8.8",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "component-showcase",
|
||||
"version": "0.8.7",
|
||||
"version": "0.8.8",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.16",
|
||||
"@wrnexus/dev-server": "^0.8.66",
|
||||
"@wrnexus/helpers": "^0.8.9",
|
||||
"@wrnexus/plugin": "^0.8.9",
|
||||
"@wrnexus/styles": "^0.8.26",
|
||||
"@wrnexus/syntax": "^0.8.19",
|
||||
"@wrnexus/ui": "^0.8.88"
|
||||
"@wrnexus/core": "0.8.25",
|
||||
"@wrnexus/design-studio": "0.1.0",
|
||||
"@wrnexus/design-system": "0.1.0",
|
||||
"@wrnexus/dev-server": "0.8.83",
|
||||
"@wrnexus/helpers": "0.8.10",
|
||||
"@wrnexus/plugin": "0.8.10",
|
||||
"@wrnexus/styles": "0.8.27",
|
||||
"@wrnexus/syntax": "0.8.20",
|
||||
"@wrnexus/ui": "0.8.118"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/lucide": "^1.2.123",
|
||||
"@iconify/tailwind4": "^1.2.3",
|
||||
"@tailwindcss/cli": "^4.3.3",
|
||||
"@types/bun": "^1.3.14",
|
||||
"@wrnexus/cli": "^0.8.72",
|
||||
"@wrnexus/compiler": "^0.8.30",
|
||||
"@wrnexus/cli": "0.8.77",
|
||||
"@wrnexus/compiler": "0.8.44",
|
||||
"happy-dom": "^20.11.6",
|
||||
"prettier": "^3.6.2",
|
||||
"tailwindcss": "^4.3.3",
|
||||
@@ -144,6 +146,12 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@kurkle/color": {
|
||||
"version": "0.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
|
||||
"integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@noble/hashes": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.8.0.tgz",
|
||||
@@ -1062,57 +1070,67 @@
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/ai": {
|
||||
"version": "0.8.10",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/ai/-/ai-0.8.10.tgz",
|
||||
"integrity": "sha512-/vCpdkB4DpTRQ6g7UtwXLx95pWpBTfqvBukNjjRy5/L3hLiIp29n5RzPw+n3kRVhE8uGRCaKc9yUBxlhNKHUMA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/authz": {
|
||||
"version": "0.8.15",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/authz/-/authz-0.8.15.tgz",
|
||||
"integrity": "sha512-ZV1cvHrOkephfjs/gzzcLkN4HEHSFWJVZVmfsvir/GZs/X7+ZQbPNYUQZV7SsRlyMkUxgTKMCiZ8Ym49eOBSQw==",
|
||||
"version": "0.8.16",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/authz/-/authz-0.8.16.tgz",
|
||||
"integrity": "sha512-bKs6X+nAU7w7m4Vvdf92/5ZjZ0MCPRxmCHvHAI376LtYlLVqqiDVRN2j1JWCkPdrvYaXeqsz6DMhPIKdKzS8Zg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.12",
|
||||
"@wrnexus/db": "^0.8.20",
|
||||
"@wrnexus/plugin": "^0.8.8"
|
||||
"@wrnexus/core": "^0.8.25",
|
||||
"@wrnexus/db": "^0.8.24",
|
||||
"@wrnexus/plugin": "^0.8.10"
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/cache": {
|
||||
"version": "0.8.8",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/cache/-/cache-0.8.8.tgz",
|
||||
"integrity": "sha512-GSV2myyy8xVeI8LdtJoIffW6fveCqB4WWN0CaodhVpI+4Y2aEmfJ6qwFikf34qI8Fy1+2ca9sKl5t1494kZBvw==",
|
||||
"version": "0.8.9",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/cache/-/cache-0.8.9.tgz",
|
||||
"integrity": "sha512-NftsbOsRtKCV77xxqNENIeUgcJjDgWuZL8KjxYJOdc6vVevoJ/fWU/EprqIuZ6YNtqm7TFFqMEENpb6GLvidGg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.9"
|
||||
"@wrnexus/core": "^0.8.25"
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/cli": {
|
||||
"version": "0.8.72",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/cli/-/cli-0.8.72.tgz",
|
||||
"integrity": "sha512-JeFsDMldcjiUFMhal11V/bfg/dNcG+OJh7+Bt6lmU3ojxTajvxV6pjLPp022hYDBZPu83jupiF4WZPwOLy/+Bw==",
|
||||
"version": "0.8.77",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/cli/-/cli-0.8.77.tgz",
|
||||
"integrity": "sha512-zFkifdFVwkcja9H8ctEZMPD5khBqmhp32yqSGjBvJnfuFCBdaRB9U5uCkqBbPCQUELrqTvCG2lafvQaptBo8xQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/authz": "^0.8.15",
|
||||
"@wrnexus/compiler": "^0.8.30",
|
||||
"@wrnexus/core": "^0.8.16",
|
||||
"@wrnexus/csr": "^0.8.41",
|
||||
"@wrnexus/db": "^0.8.23",
|
||||
"@wrnexus/dev-server": "^0.8.66",
|
||||
"@wrnexus/i18n": "^0.8.12",
|
||||
"@wrnexus/mcp": "^0.8.8",
|
||||
"@wrnexus/playground": "^0.8.8",
|
||||
"@wrnexus/plugin": "^0.8.9",
|
||||
"@wrnexus/react": "^0.8.9",
|
||||
"@wrnexus/router": "^0.8.10",
|
||||
"@wrnexus/security": "^0.8.9",
|
||||
"@wrnexus/styles": "^0.8.25",
|
||||
"@wrnexus/syntax": "^0.8.19",
|
||||
"@wrnexus/typecheck": "^0.8.17",
|
||||
"@wrnexus/ui": "^0.8.85",
|
||||
"@wrnexus/validation": "^0.8.13",
|
||||
"@wrnexus/authz": "^0.8.16",
|
||||
"@wrnexus/compiler": "^0.8.44",
|
||||
"@wrnexus/core": "^0.8.25",
|
||||
"@wrnexus/csr": "^0.8.74",
|
||||
"@wrnexus/db": "^0.8.24",
|
||||
"@wrnexus/design-system": "^0.1.0",
|
||||
"@wrnexus/dev-server": "^0.8.83",
|
||||
"@wrnexus/i18n": "^0.8.13",
|
||||
"@wrnexus/mcp": "^0.8.9",
|
||||
"@wrnexus/playground": "^0.8.9",
|
||||
"@wrnexus/plugin": "^0.8.10",
|
||||
"@wrnexus/react": "^0.8.10",
|
||||
"@wrnexus/router": "^0.8.11",
|
||||
"@wrnexus/security": "^0.8.10",
|
||||
"@wrnexus/styles": "^0.8.27",
|
||||
"@wrnexus/syntax": "^0.8.20",
|
||||
"@wrnexus/typecheck": "^0.8.18",
|
||||
"@wrnexus/ui": "^0.8.118",
|
||||
"@wrnexus/validation": "^0.8.14",
|
||||
"selfsigned": "^5.5.0"
|
||||
},
|
||||
"bin": {
|
||||
@@ -1123,33 +1141,33 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/compiler": {
|
||||
"version": "0.8.30",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/compiler/-/compiler-0.8.30.tgz",
|
||||
"integrity": "sha512-zsxqcIMOzXxX98z6RFffwQUa6VuniOqGZO/vxDdOJiyJ8RTs7gOk8dsBhA6MTLQ1fafPxJPV3zkGotKXOuxhCQ==",
|
||||
"version": "0.8.44",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/compiler/-/compiler-0.8.44.tgz",
|
||||
"integrity": "sha512-TJ3qPfD+2VsmpuVXgA6CUIlv2fqU2tW8xrIvHUFkGYJpVzF5jbSBUsoHNDfCT9/t5gw3CGazJnPqgzdcIm5XCg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/csr": "^0.8.41",
|
||||
"@wrnexus/store": "^0.8.12",
|
||||
"@wrnexus/syntax": "^0.8.19",
|
||||
"@wrnexus/validation": "^0.8.13"
|
||||
"@wrnexus/csr": "^0.8.74",
|
||||
"@wrnexus/store": "^0.8.13",
|
||||
"@wrnexus/syntax": "^0.8.20",
|
||||
"@wrnexus/validation": "^0.8.14"
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/core": {
|
||||
"version": "0.8.16",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/core/-/core-0.8.16.tgz",
|
||||
"integrity": "sha512-lTNigmTpJsgQnB95xMhalJ6Xbp/QBUf9J0MM4cuiecZ1DQLpaSgGC12Sn7FIC46rTU4w8878XJXlVWDCabe16Q==",
|
||||
"version": "0.8.25",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/core/-/core-0.8.25.tgz",
|
||||
"integrity": "sha512-od4TyDIKoX0RhjTDq+1HJ5fGQPID04Ao+BvWEkJU0beWRbXLZ6u5iRsh58+h/T2so8NSI9sW4rorC4N+BSMaqQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/csr": {
|
||||
"version": "0.8.43",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/csr/-/csr-0.8.43.tgz",
|
||||
"integrity": "sha512-czmxeLxvNvD7XjU3TufFBGMzuDWpNB0qpYbmbiARB7l6rslBw3+GuBWf2U5k4DH6oYiN/DGD6Jj+/G3bEh6ARw==",
|
||||
"version": "0.8.74",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/csr/-/csr-0.8.74.tgz",
|
||||
"integrity": "sha512-hqU7zqWRlkiOxJ8Ke9YidqwRN/CvmvozsK24XPsnlo7zt1IpNma0Woo9J5ZnO3MO9ihVU4sa8tmg61ucKHFFpQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.12"
|
||||
@@ -1159,101 +1177,132 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/db": {
|
||||
"version": "0.8.23",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/db/-/db-0.8.23.tgz",
|
||||
"integrity": "sha512-ncZlvclHW98Enah9wlHOf9+StoVGLrCOCVBAOEFdZKV91vKnYDltcFlmG7i7crndN37kayyb319Wiwol8Hmhyg==",
|
||||
"version": "0.8.24",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/db/-/db-0.8.24.tgz",
|
||||
"integrity": "sha512-zLT7e+C1nWhYs3BnqEjEO0QSli0JNl5sSnSHObjSX0C+wty30ASWD1WyBnfu9xFjOFn1eucZGthzo1xdGGQ1TQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/design-studio": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/design-studio/-/design-studio-0.1.0.tgz",
|
||||
"integrity": "sha512-HeY3zG45oEvsLy1my9nCgKHb11ip9eTthhp/bzeOIXEn8vk71pRhqdgrltEwn2vFKIlKuPBQlA4xftmLDhSWTQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/ai": "^0.8.10",
|
||||
"@wrnexus/compiler": "^0.8.44",
|
||||
"@wrnexus/core": "^0.8.25",
|
||||
"@wrnexus/csr": "^0.8.74",
|
||||
"@wrnexus/design-system": "^0.1.0",
|
||||
"@wrnexus/ssr": "^0.8.20",
|
||||
"@wrnexus/styles": "^0.8.27",
|
||||
"@wrnexus/ui": "^0.8.118"
|
||||
},
|
||||
"bin": {
|
||||
"wrnexus-design-studio": "dist/cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/design-system": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/design-system/-/design-system-0.1.0.tgz",
|
||||
"integrity": "sha512-gNH/B+kYYZy+Pvlvl3gXoQZlTS6iP/teXct2MoClmsGp6M1vKa8IEptVXKs7po3E83zj5kSh3FIXwcBJHtZqLg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/dev-server": {
|
||||
"version": "0.8.66",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/dev-server/-/dev-server-0.8.66.tgz",
|
||||
"integrity": "sha512-RBJWyUEGmOS6ZgIm5NvNPB4BVhVIpGFEEf4NSLDKJtp/Z5K2+G44KbRhZaaYvl6F4IEZM2Zg5x+ZAX+o5XB34w==",
|
||||
"version": "0.8.83",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/dev-server/-/dev-server-0.8.83.tgz",
|
||||
"integrity": "sha512-Ue6Q2KF7nZycvghRvWQBC9PA0DZ2aE+8fC3FaIFMkbID9HLK64Xe+MgMnLDJvQ7mlBJlC+9Ztj8yOYqSavtq1g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/authz": "^0.8.15",
|
||||
"@wrnexus/cache": "^0.8.8",
|
||||
"@wrnexus/compiler": "^0.8.30",
|
||||
"@wrnexus/core": "^0.8.16",
|
||||
"@wrnexus/csr": "^0.8.41",
|
||||
"@wrnexus/db": "^0.8.23",
|
||||
"@wrnexus/dev-toolbar": "^0.8.18",
|
||||
"@wrnexus/i18n": "^0.8.12",
|
||||
"@wrnexus/observability": "^0.8.8",
|
||||
"@wrnexus/plugin": "^0.8.9",
|
||||
"@wrnexus/pubsub": "^0.8.9",
|
||||
"@wrnexus/pwa": "^0.8.12",
|
||||
"@wrnexus/queue": "^0.8.14",
|
||||
"@wrnexus/react": "^0.8.9",
|
||||
"@wrnexus/router": "^0.8.10",
|
||||
"@wrnexus/rpc": "^0.8.10",
|
||||
"@wrnexus/security": "^0.8.9",
|
||||
"@wrnexus/ssr": "^0.8.12",
|
||||
"@wrnexus/store": "^0.8.12",
|
||||
"@wrnexus/styles": "^0.8.23",
|
||||
"@wrnexus/ui": "^0.8.84",
|
||||
"@wrnexus/uploader": "^0.8.13",
|
||||
"@wrnexus/validation": "^0.8.13"
|
||||
"@wrnexus/authz": "^0.8.16",
|
||||
"@wrnexus/cache": "^0.8.9",
|
||||
"@wrnexus/compiler": "^0.8.44",
|
||||
"@wrnexus/core": "^0.8.25",
|
||||
"@wrnexus/csr": "^0.8.74",
|
||||
"@wrnexus/db": "^0.8.24",
|
||||
"@wrnexus/dev-toolbar": "^0.8.19",
|
||||
"@wrnexus/i18n": "^0.8.13",
|
||||
"@wrnexus/observability": "^0.8.9",
|
||||
"@wrnexus/plugin": "^0.8.10",
|
||||
"@wrnexus/pubsub": "^0.8.10",
|
||||
"@wrnexus/pwa": "^0.8.13",
|
||||
"@wrnexus/queue": "^0.8.15",
|
||||
"@wrnexus/react": "^0.8.10",
|
||||
"@wrnexus/router": "^0.8.11",
|
||||
"@wrnexus/rpc": "^0.8.11",
|
||||
"@wrnexus/security": "^0.8.10",
|
||||
"@wrnexus/ssr": "^0.8.20",
|
||||
"@wrnexus/store": "^0.8.13",
|
||||
"@wrnexus/styles": "^0.8.27",
|
||||
"@wrnexus/ui": "^0.8.118",
|
||||
"@wrnexus/uploader": "^0.8.14",
|
||||
"@wrnexus/validation": "^0.8.14"
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/dev-toolbar": {
|
||||
"version": "0.8.18",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/dev-toolbar/-/dev-toolbar-0.8.18.tgz",
|
||||
"integrity": "sha512-7mj/FLIhLjx/DxH/gUlYwZqm63o/rcwH/0K/K6Efxvu9zfM5OyAh2w3L2eDWI9asK5foZkit8cKMUXVgmqHkcA==",
|
||||
"version": "0.8.19",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/dev-toolbar/-/dev-toolbar-0.8.19.tgz",
|
||||
"integrity": "sha512-Rfl94o7Tkd9KpwB7RO13DPm7vrqSjaHE5AFyiNL9ypKEXWJhvQf6yvQ6NvlU0gy8j119Fgqg+zBUkVN16QZVMA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/helpers": {
|
||||
"version": "0.8.9",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/helpers/-/helpers-0.8.9.tgz",
|
||||
"integrity": "sha512-EzT9LSZJXIAIm2fO62BMbPJOnrloC1lujW+5UNsSd4kj44mBt6WMpBwaCSDGUcVy2/b7GKXlgBnUVZtIIGn0gw==",
|
||||
"version": "0.8.10",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/helpers/-/helpers-0.8.10.tgz",
|
||||
"integrity": "sha512-uwH83Mc0qqfE2eEYu5NNMYhhGB4xvUd2WPaY3B7RlV7RwR/SXNcmr0Ei76KPNhYWzhLO6bx5bWDlFuWENm1BoQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/authz": "^0.8.14",
|
||||
"@wrnexus/core": "^0.8.12",
|
||||
"@wrnexus/db": "^0.8.20"
|
||||
"@wrnexus/authz": "^0.8.16",
|
||||
"@wrnexus/core": "^0.8.25",
|
||||
"@wrnexus/db": "^0.8.24"
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/i18n": {
|
||||
"version": "0.8.12",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/i18n/-/i18n-0.8.12.tgz",
|
||||
"integrity": "sha512-pgDJZpS8qB3tz+FMY+CNUF7AZXJVRFWbFDSHk+QMeUAwkU7JbNDxwmKioa6QU50F6C0SUMbfVwDR3kBXZKBflQ==",
|
||||
"version": "0.8.13",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/i18n/-/i18n-0.8.13.tgz",
|
||||
"integrity": "sha512-Go4JT+mc/SYnqWiv0ha+7/NLLPY/1HVFbCz8m2oLwtYKMrsZtn62Ows4uW54fzTY3fp8RkaVxDgkiC2p2jA1tw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.9",
|
||||
"@wrnexus/plugin": "^0.8.8",
|
||||
"@wrnexus/ui": "^0.8.19"
|
||||
"@wrnexus/core": "^0.8.25",
|
||||
"@wrnexus/plugin": "^0.8.10",
|
||||
"@wrnexus/ui": "^0.8.118"
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/jwt": {
|
||||
"version": "0.8.9",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/jwt/-/jwt-0.8.9.tgz",
|
||||
"integrity": "sha512-LcjXLdDp8pnJ3F6dDGlB3COlvg7jVBIZe+UnF48i7Hy12gHZu0Rbv/iBn9w203tpzT2EmcpGtMyI/J+uLQUeVg==",
|
||||
"version": "0.8.10",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/jwt/-/jwt-0.8.10.tgz",
|
||||
"integrity": "sha512-axXx1aCrIgpNhJyreKDQ78IlqGH+3AeKtfEW+/pzPFUXU03DU/YdCasK+WcZYYAQPPcZnegJA9MP9cYZYAFBCQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.9"
|
||||
"@wrnexus/core": "^0.8.25"
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/mcp": {
|
||||
"version": "0.8.8",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/mcp/-/mcp-0.8.8.tgz",
|
||||
"integrity": "sha512-E4Rz03RVjzyjTdwL9d2zzMKLIkyTw1DMcwiRrdAcAEk6/HYJr4rnttiIGcw1lu58ptrLM/lUeqYWEWV+SyDXcQ==",
|
||||
"version": "0.8.9",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/mcp/-/mcp-0.8.9.tgz",
|
||||
"integrity": "sha512-OVSL2ZZeTh6pwuQiWK4gjTLDVfzu4INuf5PvMjyynzphXwsFWpL5m8BvVD4or4R9Jvm/R8WAhHIO8gLWZHF1oA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
@@ -1261,188 +1310,209 @@
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@wrnexus/design-studio": "^0.1.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@wrnexus/design-studio": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/observability": {
|
||||
"version": "0.8.8",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/observability/-/observability-0.8.8.tgz",
|
||||
"integrity": "sha512-P7R4IYm7o6OfP1TmQ6L537DAOMH5WbC74TP4rw/Stwx8RxS/ORYPWw0mGB8f+1eamOV40Y5U4E04nmf3Tugj0Q==",
|
||||
"version": "0.8.9",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/observability/-/observability-0.8.9.tgz",
|
||||
"integrity": "sha512-f+kUNBATorCxKl04HsNuQi7o8pOgyW8qpfljWsFgauIdYxtTDFSxCERZIlprHyvin5l5ffAKFZcXeSutGqiPgQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.9"
|
||||
"@wrnexus/core": "^0.8.25"
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/playground": {
|
||||
"version": "0.8.8",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/playground/-/playground-0.8.8.tgz",
|
||||
"integrity": "sha512-FpQ2n81GWSJSc0LccH6zDYm0pfdUk54LdDYma0Y72pyLfRjSY0ymQJcCr6Jp/EE5iBIhRowD6ag7vd26h27pZA==",
|
||||
"version": "0.8.9",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/playground/-/playground-0.8.9.tgz",
|
||||
"integrity": "sha512-hQCmKoi6gthyYLZDtvcDJFwq5THuxIWDijltDWTDOe9Gy7WdVn9UhrRVEFFYZ6VLtBRXAxnzlGb7eqJAMBKTaA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/compiler": "^0.8.10",
|
||||
"@wrnexus/syntax": "^0.8.9"
|
||||
"@wrnexus/compiler": "^0.8.44",
|
||||
"@wrnexus/syntax": "^0.8.20"
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/plugin": {
|
||||
"version": "0.8.9",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/plugin/-/plugin-0.8.9.tgz",
|
||||
"integrity": "sha512-XpkQL4/MpiNxoNcH1l7dL5cYEu8HN54/b5bx6DBXWutU4tMrAjChtbJ+SsE2YrNve4uWVUhF8wPgsdBrJONOQQ==",
|
||||
"version": "0.8.10",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/plugin/-/plugin-0.8.10.tgz",
|
||||
"integrity": "sha512-YVSLW8Lzq3/eFzAOj9B2A6ngFvdm2jmzSCEd2tI491rGqLbQWyFx3NzCuN/CnAZOA3kyHE+W4oiG6/3cyWWZsg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/syntax": "^0.8.19"
|
||||
"@wrnexus/syntax": "^0.8.20"
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/pubsub": {
|
||||
"version": "0.8.9",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/pubsub/-/pubsub-0.8.9.tgz",
|
||||
"integrity": "sha512-Z696WHuzJsPJvkvz3aRcifiZEqHXSIzoH3ji/wPqBP+vqmKIiZ/WIzViSQ0j8QJgtHiiq1mo2d4GFxsfdAPbqg==",
|
||||
"version": "0.8.10",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/pubsub/-/pubsub-0.8.10.tgz",
|
||||
"integrity": "sha512-X0ZEEvcSjUqvNT49vyYTmxgtEiQl6l8gFPfkbWWixsvAGQO55QGjZCvtUu/R0ItJ+1an45DKx9R4Z6K7ppqcUQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.9",
|
||||
"@wrnexus/rpc": "^0.8.9"
|
||||
"@wrnexus/core": "^0.8.25",
|
||||
"@wrnexus/rpc": "^0.8.11"
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/pwa": {
|
||||
"version": "0.8.12",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/pwa/-/pwa-0.8.12.tgz",
|
||||
"integrity": "sha512-XI5wgn+vbPcSbAt3EsqnrPjkx2cd/Zpo3xy2deawuU5k7irkRImPNUWvtjkTar5GaNedVvuZQAhXLghb9p/GQQ==",
|
||||
"version": "0.8.13",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/pwa/-/pwa-0.8.13.tgz",
|
||||
"integrity": "sha512-u4D8jfI5ZHJbZrOTfeEJ9CTq+wCTqJ7ZjoRlTddf1RnAV/w8d6Vg72KDy6ApdoNuiJMqHRu44nqK053UyP00Sw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/queue": {
|
||||
"version": "0.8.14",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/queue/-/queue-0.8.14.tgz",
|
||||
"integrity": "sha512-uulbyU1AF3gnfylmlFMIoBjAKgAgHsHg+FfEmLtoYwsaQ+JtMNk5PEZ/GUUBxEmK9ZbEAdgBAxgEX69E7ne9aA==",
|
||||
"version": "0.8.15",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/queue/-/queue-0.8.15.tgz",
|
||||
"integrity": "sha512-xJPZUqxYRMEgrgPIZoaZRMDWwwB8rUu0mrizNAGoZIwz1BzPsdVJaXOhsFvZd/mkHgk1CupxYXMNHuYA2pRGDg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.12",
|
||||
"@wrnexus/db": "^0.8.20",
|
||||
"@wrnexus/rpc": "^0.8.10"
|
||||
"@wrnexus/core": "^0.8.25",
|
||||
"@wrnexus/db": "^0.8.24",
|
||||
"@wrnexus/rpc": "^0.8.11"
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/react": {
|
||||
"version": "0.8.9",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/react/-/react-0.8.9.tgz",
|
||||
"integrity": "sha512-031RC/EBF1nzSeiwo2gXhOJ+xMLRtPUniN612ZVzj+pqGdn1J8I8vajZwRYKYC2xAVdCiB/EGoZ3FQaT75h8qw==",
|
||||
"version": "0.8.10",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/react/-/react-0.8.10.tgz",
|
||||
"integrity": "sha512-n5mdbb7ZWxOylL4I28GCEjLSFArPLNB8pCEIT3CxYXQQXkHgGXNS+++ls6R1XwnTrGLUJfVECpzRmf6mfeszUQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/store": "^0.8.8"
|
||||
"@wrnexus/store": "^0.8.13"
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/router": {
|
||||
"version": "0.8.10",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/router/-/router-0.8.10.tgz",
|
||||
"integrity": "sha512-zh+h+VDNshSsh2iryqbOCWOhcIbKXg58iWkHz3wKNovlWT0uAgLhmea6IHsiApI8RC/VPw4TAmAhfkaK1c4BBA==",
|
||||
"version": "0.8.11",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/router/-/router-0.8.11.tgz",
|
||||
"integrity": "sha512-9hry5s0GQ0RdBXWue3I6JBijZMHcO+7J9oJnKqwPD2zScHdmU8ooJ4LyuI9kqf9Wc22Zl9Whgp/OjxGMa8aRtw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/compiler": "^0.8.17",
|
||||
"@wrnexus/core": "^0.8.12"
|
||||
"@wrnexus/compiler": "^0.8.44",
|
||||
"@wrnexus/core": "^0.8.25"
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/rpc": {
|
||||
"version": "0.8.10",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/rpc/-/rpc-0.8.10.tgz",
|
||||
"integrity": "sha512-KbfSxEe0D0ZiM1CckxiEVIEBSzYRYb3iEJYyJnT8DqlrEpos1hCwT22XnTMC3ldsCAusoUPO5gTXMBXL9qMKDQ==",
|
||||
"version": "0.8.11",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/rpc/-/rpc-0.8.11.tgz",
|
||||
"integrity": "sha512-SKxM0ACMsz3MQ7J0tYam2ZlE6WI3immFgak/bxtdwarMM6CVV6t3zxq/zw5EGfeWuCQxmTefOpvaTuhvzgKf5A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.9",
|
||||
"@wrnexus/helpers": "^0.8.8",
|
||||
"@wrnexus/jwt": "^0.8.9",
|
||||
"@wrnexus/validation": "^0.8.10"
|
||||
"@wrnexus/core": "^0.8.25",
|
||||
"@wrnexus/helpers": "^0.8.10",
|
||||
"@wrnexus/jwt": "^0.8.10",
|
||||
"@wrnexus/validation": "^0.8.14"
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/security": {
|
||||
"version": "0.8.9",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/security/-/security-0.8.9.tgz",
|
||||
"integrity": "sha512-dgz2fYwiw7uhBdsMuLqlPQaqajJx1McTjAhx8Pp1lf8gddsXm+Dnmri/1LXSbPwuSpWB7gsNq326JlVICfipVQ==",
|
||||
"version": "0.8.10",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/security/-/security-0.8.10.tgz",
|
||||
"integrity": "sha512-DRPI1TpMbVNtx91jnsIHN+ONvNs6RYKW5hot8Gez6y/XRliksAQAv4qPlW3V/Jctzsfue7Bz0qhERtqcnUzKPw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.11"
|
||||
"@wrnexus/core": "^0.8.25"
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/ssr": {
|
||||
"version": "0.8.12",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/ssr/-/ssr-0.8.12.tgz",
|
||||
"integrity": "sha512-fPoxMfnlwuUs6syJ6LMjqzxIKGsghQ3UCKjSFkRXlvdwdPpWRSxW0g0+jJF66/OTyCo2kB0dwMRGVLhICLgvLw==",
|
||||
"version": "0.8.20",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/ssr/-/ssr-0.8.20.tgz",
|
||||
"integrity": "sha512-0+I9C9Mjtpk8IeOfU+TIPo4/Wb1r3TC+xZBytj0v1Sper8IWSGw0At6opbJMnw5PPERnsQC0XJDhcSVlj2Wbuw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.16",
|
||||
"@wrnexus/security": "^0.8.9",
|
||||
"@wrnexus/store": "^0.8.12"
|
||||
"@wrnexus/core": "^0.8.25",
|
||||
"@wrnexus/security": "^0.8.10",
|
||||
"@wrnexus/store": "^0.8.13"
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/store": {
|
||||
"version": "0.8.12",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/store/-/store-0.8.12.tgz",
|
||||
"integrity": "sha512-5AiJXZ6AFT2eshp21JEyeHlmBgHuxyeRslN6YZiIvUfoO4Dre3VtR4pI+hN3lOGloLXwXBUfEMm2mgGsXS36Kg==",
|
||||
"version": "0.8.13",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/store/-/store-0.8.13.tgz",
|
||||
"integrity": "sha512-EHfjbs3qcVVFA5QkLDubH8bBdVWHAinx+5GYeo7asYSs/4qcfd6K0X0bsXp73FVm3CHgGeN9I+Ih6bNJmAEEWQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/styles": {
|
||||
"version": "0.8.26",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/styles/-/styles-0.8.26.tgz",
|
||||
"integrity": "sha512-B1FgQYks6S9SohlWjDkRabbzAAW9IIKbR5rHrdXegr6QY3nQMtJYPMG8xUVMTpQ8gRL+GODtuhDYPHD/igHuPg==",
|
||||
"version": "0.8.27",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/styles/-/styles-0.8.27.tgz",
|
||||
"integrity": "sha512-2DTZycU9LVaEn5/7ZsV87LDgDcm1fht6MHXp+alTBmlmkJ2tjeJnJm2wiMydStWKjf8E3AKAhZWg/3f2wOGi1g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.16",
|
||||
"@wrnexus/plugin": "^0.8.9",
|
||||
"@wrnexus/uploader": "^0.8.13"
|
||||
"@wrnexus/core": "^0.8.25",
|
||||
"@wrnexus/design-system": "^0.1.0",
|
||||
"@wrnexus/plugin": "^0.8.10",
|
||||
"@wrnexus/uploader": "^0.8.14"
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/syntax": {
|
||||
"version": "0.8.19",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/syntax/-/syntax-0.8.19.tgz",
|
||||
"integrity": "sha512-/OZ+Z/cdFmfqKeqCZZpmwN2ZRSITA2ByqmVjGVONtMRfxHBj99T5jB0be6qlxrmoK0cgntRxEe2JCS/d9h54YA==",
|
||||
"version": "0.8.20",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/syntax/-/syntax-0.8.20.tgz",
|
||||
"integrity": "sha512-vd3EQLjLeNnnlSRVUMY4m+VksKpUHfTla0eWSZ8N+GroEVDgYegHW79tWcRAlmCxPe/jrpUSGri6dZoty2b72A==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/typecheck": {
|
||||
"version": "0.8.17",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/typecheck/-/typecheck-0.8.17.tgz",
|
||||
"integrity": "sha512-sEvCraG7qudT61h0SbuccIegi37nVWW2B1+BjmPg6Zrtc0251lUozASOYMW2ntjiizASDXMTSnZvSJ36EJPflA==",
|
||||
"version": "0.8.18",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/typecheck/-/typecheck-0.8.18.tgz",
|
||||
"integrity": "sha512-oS5x6hUs6VUNEupDARzFTzXvvdRAV6l8nO3wi+5rdfeDIDSz/5QNeQfVwzJg7SDGVkuTVOHH8lqyiMtSW+8Nbg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/syntax": "^0.8.19",
|
||||
"@wrnexus/syntax": "^0.8.20",
|
||||
"typescript": "^6.0.3"
|
||||
},
|
||||
"engines": {
|
||||
@@ -1464,40 +1534,44 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/ui": {
|
||||
"version": "0.8.88",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/ui/-/ui-0.8.88.tgz",
|
||||
"integrity": "sha512-C6q3c85tJm0Ajhgb8i+DYOWyICNxeXVsR3KbD5yP0rC2XS5Vj9TP72x7NPux798jGLpbOpSPRiIPUff7zAod7w==",
|
||||
"version": "0.8.118",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/ui/-/ui-0.8.118.tgz",
|
||||
"integrity": "sha512-a0RWv3P+Z0f19Pqvaq+mHcBrAYni1k8iXQKMf9r83rYp3m6V4e00Fahg661VcF4Y6o3SAn151YVTH3zrRwsaWw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.16"
|
||||
"@wrnexus/core": "^0.8.25",
|
||||
"@wrnexus/design-system": "^0.1.0",
|
||||
"@wrnexus/plugin": "^0.8.10",
|
||||
"chart.js": "^4.5.1",
|
||||
"drawflow": "0.0.60"
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/uploader": {
|
||||
"version": "0.8.13",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/uploader/-/uploader-0.8.13.tgz",
|
||||
"integrity": "sha512-Cfj5Iqtbk/ccXV/YXQ4I8v0GkcE7cFnzMEB33qy3DcWo4fA5ndiWU9CN4Ap1oysA5MWEmcCKuJlcTKdWLhiTvw==",
|
||||
"version": "0.8.14",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/uploader/-/uploader-0.8.14.tgz",
|
||||
"integrity": "sha512-LticgG17uYu65IYRNDGagtvjfdUNrVHR2drbv6r/J4pycNX6CcGGn0hbjZFPA1uSHfH/hp//hA+KTOcoE14aMQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.12",
|
||||
"@wrnexus/plugin": "^0.8.8",
|
||||
"@wrnexus/ui": "^0.8.23"
|
||||
"@wrnexus/core": "^0.8.25",
|
||||
"@wrnexus/plugin": "^0.8.10",
|
||||
"@wrnexus/ui": "^0.8.118"
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@wrnexus/validation": {
|
||||
"version": "0.8.13",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/validation/-/validation-0.8.13.tgz",
|
||||
"integrity": "sha512-ud9bzeSaOzbYnmu6pKEr5XbBT25FW+ROOI9iB0YJBc624juurslgHm2lpmpOu2WKUWulgktb/2vl9nsvtI8pSw==",
|
||||
"version": "0.8.14",
|
||||
"resolved": "https://registry.workroot.in/repository/npm/@wrnexus/validation/-/validation-0.8.14.tgz",
|
||||
"integrity": "sha512-cdy8soKgKqGI3FP1wvbHsmdKAnDAzN6h0LcUadgjqz9sfp7RSsYuFBxEw/lkZiWkUbBbAuAaQ/sI7FgXWDnPxg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.12",
|
||||
"@wrnexus/plugin": "^0.8.8",
|
||||
"@wrnexus/ui": "^0.8.76"
|
||||
"@wrnexus/core": "^0.8.25",
|
||||
"@wrnexus/plugin": "^0.8.10",
|
||||
"@wrnexus/ui": "^0.8.118"
|
||||
},
|
||||
"engines": {
|
||||
"bun": ">=1.3.0"
|
||||
@@ -1567,6 +1641,18 @@
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/chart.js": {
|
||||
"version": "4.5.1",
|
||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
|
||||
"integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@kurkle/color": "^0.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"pnpm": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/commander": {
|
||||
"version": "11.1.0",
|
||||
"dev": true,
|
||||
@@ -1705,6 +1791,12 @@
|
||||
"url": "https://github.com/fb55/domutils?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/drawflow": {
|
||||
"version": "0.0.60",
|
||||
"resolved": "https://registry.npmjs.org/drawflow/-/drawflow-0.0.60.tgz",
|
||||
"integrity": "sha512-UGj1+1DnWCVY6vJXBb6Ayt7KpPINBGqncVqpYDumVeBdIKxlBGn0tksp2yciVzQjkYsjFwMMDEdoVyWzUa2wkA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/enhanced-resolve": {
|
||||
"version": "5.24.3",
|
||||
"dev": true,
|
||||
|
||||
Loaded 100 of 113 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user