@adia-ai/web-components 0.6.6 → 0.6.8

package/components/badge/badge.examples.md

@@ -0,0 +1,19 @@
+# badge — Examples
+
+## variant
+
+```html
+<badge-ui text="Default"></badge-ui>
+```
+
+## size
+
+```html
+<badge-ui text="Small" size="sm"></badge-ui>
+```
+
+## text
+
+```html
+<badge-ui text="New"></badge-ui>
+```

package/components/block/block.examples.md

@@ -0,0 +1,29 @@
+# block — Examples
+
+## padding
+
+```html
+<block-ui padding="none" style="border:1px dashed var(--a-border);">
+  <p>padding: none</p>
+</block-ui>
+```
+
+## margin
+
+```html
+<div style="background:var(--a-accent-10-tint); display:inline-block;">
+  <block-ui margin="none" padding="sm" style="border:1px dashed var(--a-border); background:var(--a-canvas-bg);">
+    <p>margin: none</p>
+  </block-ui>
+</div>
+```
+
+## Combinations
+
+```html
+<div style="background:var(--a-accent-10-tint); display:inline-block;">
+  <block-ui padding="lg" margin="md" style="border:1px dashed var(--a-border); background:var(--a-canvas-bg);">
+    <p>padding: lg + margin: md</p>
+  </block-ui>
+</div>
+```

package/components/breadcrumb/breadcrumb.examples.md

@@ -0,0 +1,32 @@
+# breadcrumb — Examples
+
+## basic
+
+```html
+<breadcrumb-ui>
+  <span>Home</span>
+  <span>Components</span>
+  <span>Breadcrumb</span>
+</breadcrumb-ui>
+```
+
+## custom separator
+
+```html
+<breadcrumb-ui separator="&gt;">
+  <span>Home</span>
+  <span>Settings</span>
+  <span>General</span>
+</breadcrumb-ui>
+```
+
+## with links
+
+```html
+<breadcrumb-ui>
+  <a href="#">Home</a>
+  <a href="#">Products</a>
+  <a href="#">Category</a>
+  <span>Item Detail</span>
+</breadcrumb-ui>
+```

package/components/button/button.examples.md

@@ -0,0 +1,19 @@
+# button — Examples
+
+## variant
+
+```html
+<button-ui text="Default"></button-ui>
+```
+
+## size
+
+```html
+<button-ui text="Small" size="sm"></button-ui>
+```
+
+## icon-only
+
+```html
+<button-ui icon="plus" size="sm"></button-ui>
+```

package/components/calendar-picker/calendar-picker.examples.md

@@ -0,0 +1,23 @@
+# calendar-picker — Examples
+
+## Default
+
+```html
+<calendar-picker-ui></calendar-picker-ui>
+```
+
+## label
+
+```html
+<field-ui label="Start Date">
+  <calendar-picker-ui></calendar-picker-ui>
+</field-ui>
+```
+
+## Pre-selected
+
+```html
+<field-ui label="Birthday">
+  <calendar-picker-ui value="1990-06-15"></calendar-picker-ui>
+</field-ui>
+```

package/components/canvas/canvas.examples.md

@@ -0,0 +1,49 @@
+# canvas — Examples
+
+## basic
+
+```html
+<card-ui variant="outlined">
+  <section>
+    <col-ui gap="3">
+      <text-ui strong>How it works</text-ui>
+      <text-ui color="subtle">
+        The canvas creates an internal
+        <code>&lt;a2ui-root&gt;</code>
+        element. Feed it A2UI protocol messages via
+        <code>.process()</code>
+        or
+        <code>.processAll()</code>
+        , and the root renders them into live AdiaUI components. User interactions (clicks, input changes) bubble up as
+        <code>canvas-interaction</code>
+        events.
+      </text-ui>
+    </col-ui>
+  </section>
+</card-ui>
+```
+
+## theme
+
+```html
+<card-ui variant="outlined">
+  <section>
+    <col-ui gap="2">
+      <text-ui strong>Default</text-ui>
+      <text-ui color="subtle">Inherits the page theme.</text-ui>
+    </col-ui>
+  </section>
+</card-ui>
+```
+
+## Version History
+
+```html
+<card-ui variant="outlined">
+  <section>
+    <col-ui gap="3">
+      <text-ui strong>Undo / Redo pattern</text-ui>
+    </col-ui>
+  </section>
+</card-ui>
+```

package/components/card/card.examples.md

@@ -0,0 +1,25 @@
+# card — Examples
+
+## variant
+
+```html
+<card-ui variant="default">
+  <section>Default card content</section>
+</card-ui>
+```
+
+## size
+
+```html
+<card-ui size="sm">
+  <section>Small card</section>
+</card-ui>
+```
+
+## elevation
+
+```html
+<card-ui elevation="0">
+  <section>No shadow</section>
+</card-ui>
+```

package/components/chart/chart.examples.md

@@ -0,0 +1,19 @@
+# chart — Examples
+
+## Axis family
+
+```html
+<chart-ui id="chart-bar" type="bar" x="month" y="value"></chart-ui>
+```
+
+## Categorical family
+
+```html
+<chart-ui id="chart-pie" type="pie" x="category" y="value"></chart-ui>
+```
+
+## Radial family
+
+```html
+<chart-ui id="chart-radar" type="radar" x="skill" y="value"></chart-ui>
+```

package/components/chart-legend/chart-legend.examples.md

@@ -0,0 +1,22 @@
+# chart-legend — Examples
+
+## shape
+
+```html
+<chart-legend-ui id="legend-dot" shape="dot" items='[{"key":"revenue","label":"Revenue","slot":0},{"key":"users","label":"Users","slot":1},{"key":"churn","label":"Churn","slot":2}]'></chart-legend-ui>
+```
+
+## position
+
+```html
+<chart-legend-ui id="legend-bottom" shape="dot" position="bottom" items='[{"key":"a","label":"Series A","slot":0},{"key":"b","label":"Series B","slot":1},{"key":"c","label":"Series C","slot":2}]'></chart-legend-ui>
+```
+
+## for — mirror a chart's legendData
+
+```html
+<div style="display:flex; flex-direction:column; gap:var(--a-space-2);">
+  <chart-ui id="demo-chart" type="multi-line" x="month" y="revenue,users,churn"></chart-ui>
+  <chart-legend-ui id="legend-for" for="demo-chart" shape="line"></chart-legend-ui>
+</div>
+```

package/components/chat-thread/chat-thread.examples.md

@@ -0,0 +1,35 @@
+# chat-thread — Examples
+
+## basic
+
+```html
+<chat-thread-ui>
+  <div role="user">What's the capital of France?</div>
+  <div role="assistant">The capital of France is Paris.</div>
+</chat-thread-ui>
+```
+
+## streaming
+
+```html
+<chat-thread-ui>
+  <div role="user">Explain black holes briefly.</div>
+  <div role="assistant" streaming>A black hole is a region of spacetime where gravity is so strong that</div>
+</chat-thread-ui>
+```
+
+## with input
+
+```html
+<chat-thread-ui>
+  <div role="user">Give me a short haiku about the ocean.</div>
+  <div role="assistant">
+    Waves whisper secrets —
+    <br>
+    the tide retreats then returns,
+    <br>
+    carrying the moon.
+  </div>
+</chat-thread-ui>
+<chat-input-ui placeholder="Type a message..."></chat-input-ui>
+```

package/components/check/check.examples.md

@@ -0,0 +1,19 @@
+# check — Examples
+
+## checked
+
+```html
+<check-ui label="Unchecked"></check-ui>
+```
+
+## indeterminate
+
+```html
+<check-ui label="Select All" indeterminate></check-ui>
+```
+
+## disabled
+
+```html
+<check-ui label="Disabled Unchecked" disabled></check-ui>
+```

package/components/code/code.examples.md

@@ -0,0 +1,31 @@
+# code — Examples
+
+## inline
+
+```html
+<p>Use  to declare a variable, or call  to convert iterables.</p>
+```
+
+## block with language
+
+```html
+<div class="container">
+  <field-ui label="Email">
+    <input-ui placeholder="you@example.com"></input-ui>
+  </field-ui>
+  <button-ui text="Submit" variant="primary"></button-ui>
+</div>
+```
+
+## escape-free authoring via <template>
+
+```html
+<template>
+  <div class="container">
+    <field-ui label="Email">
+      <input-ui placeholder="you@example.com"></input-ui>
+    </field-ui>
+    <button-ui text="Submit" variant="primary"></button-ui>
+  </div>
+</template>
+```

package/components/col/col.examples.md

@@ -0,0 +1,11 @@
+# col — Examples
+
+## Basic usage
+
+```html
+<col-ui gap="md">
+  <text-ui variant="title">Welcome back</text-ui>
+  <text-ui>Sign in to continue.</text-ui>
+  <button-ui text="Sign in" variant="solid" stretch></button-ui>
+</col-ui>
+```

package/components/color-input/color-input.examples.md

@@ -0,0 +1,19 @@
+# color-input — Examples
+
+## Default
+
+```html
+<color-input-ui name="brand"></color-input-ui>
+```
+
+## Initial values
+
+```html
+<color-input-ui name="brand-blue" value="#3b82f6"></color-input-ui>
+```
+
+## Format — hex vs oklch
+
+```html
+<color-input-ui name="hex-out" format="hex" value="#3b82f6"></color-input-ui>
+```

package/components/color-picker/color-picker.examples.md

@@ -0,0 +1,19 @@
+# color-picker — Examples
+
+## Default
+
+```html
+<color-picker-ui></color-picker-ui>
+```
+
+## Pre-set Colors
+
+```html
+<color-picker-ui value="#3b82f6"></color-picker-ui>
+```
+
+## disabled
+
+```html
+<color-picker-ui value="#3b82f6" disabled></color-picker-ui>
+```

package/components/command/command.examples.md

@@ -0,0 +1,58 @@
+# command — Examples
+
+## inline (not in dialog)
+
+```html
+<command-ui placeholder="Search commands..." style="width:32rem; max-height:24rem; border:1px solid var(--a-border); border-radius:var(--a-radius-lg);">
+  <optgroup label="Pages">
+    <option value="home" data-icon="house">Home</option>
+    <option value="dashboard" data-icon="chart-bar">Dashboard</option>
+    <option value="settings" data-icon="gear">Settings</option>
+  </optgroup>
+  <optgroup label="Actions">
+    <option value="new" data-icon="plus">Create New</option>
+    <option value="search" data-icon="magnifying-glass">Search</option>
+  </optgroup>
+</command-ui>
+```
+
+## grouped options with icons
+
+```html
+<command-ui placeholder="Type a command..." style="width:32rem; max-height:24rem; border:1px solid var(--a-border); border-radius:var(--a-radius-lg);">
+  <optgroup label="Navigation">
+    <option value="home" data-icon="house">Go to Home</option>
+    <option value="projects" data-icon="folder">Go to Projects</option>
+    <option value="settings" data-icon="gear">Go to Settings</option>
+    <option value="profile" data-icon="user">Go to Profile</option>
+  </optgroup>
+  <optgroup label="Team">
+    <option value="members" data-icon="users">View Members</option>
+    <option value="roles" data-icon="shield">Manage Roles</option>
+    <option value="invites" data-icon="envelope">Send Invites</option>
+  </optgroup>
+  <optgroup label="Account">
+    <option value="billing" data-icon="credit-card">Billing</option>
+    <option value="logout" data-icon="sign-out">Log Out</option>
+  </optgroup>
+</command-ui>
+```
+
+## with shortcuts
+
+```html
+<command-ui placeholder="Search..." style="width:32rem; max-height:24rem; border:1px solid var(--a-border); border-radius:var(--a-radius-lg);">
+  <optgroup label="Actions">
+    <option value="new-file" data-icon="file-plus" data-shortcut="&#8984;N">New File</option>
+    <option value="open" data-icon="folder-open" data-shortcut="&#8984;O">Open File</option>
+    <option value="save" data-icon="floppy-disk" data-shortcut="&#8984;S">Save</option>
+    <option value="find" data-icon="magnifying-glass" data-shortcut="&#8984;F">Find</option>
+    <option value="replace" data-icon="swap" data-shortcut="&#8984;H">Find &amp; Replace</option>
+  </optgroup>
+  <optgroup label="View">
+    <option value="toggle-sidebar" data-icon="sidebar" data-shortcut="&#8984;B">Toggle Sidebar</option>
+    <option value="toggle-theme" data-icon="moon" data-shortcut="&#8984;D">Toggle Theme</option>
+    <option value="zen-mode" data-icon="arrows-out" data-shortcut="&#8984;K Z">Zen Mode</option>
+  </optgroup>
+</command-ui>
+```

package/components/demo-toggle/demo-toggle.examples.md

@@ -0,0 +1,19 @@
+# demo-toggle — Examples
+
+## initial
+
+```html
+<demo-toggle-ui label-on="With trait" label-off="Without trait" initial="off">
+  <div slot="off" style="padding:var(--a-space-4);text-align:center;color:var(--a-fg-muted);">Bare surface — no trait attached.</div>
+  <div slot="on" style="padding:var(--a-space-4);text-align:center;color:var(--a-fg);">Same surface, with trait attached.</div>
+</demo-toggle-ui>
+```
+
+## labelOn / labelOff
+
+```html
+<demo-toggle-ui label-on="With shimmer-loading" label-off="Without shimmer-loading">
+  <div slot="off" style="padding:var(--a-space-4);">Placeholder content (no trait)</div>
+  <div slot="on" style="padding:var(--a-space-4);">Placeholder content (shimmer active)</div>
+</demo-toggle-ui>
+```

package/components/description-list/description-list.examples.md

@@ -0,0 +1,37 @@
+# description-list — Examples
+
+## Stacked (default)
+
+```html
+<description-list-ui>
+  <dt>Status</dt>
+  <dd>Active</dd>
+  <dt>Plan</dt>
+  <dd>Pro</dd>
+  <dt>Renewal</dt>
+  <dd>April 14, 2027</dd>
+</description-list-ui>
+```
+
+## Inline
+
+```html
+<description-list-ui layout="inline" align="between">
+  <dt>Weight</dt>
+  <dd>2.8 lbs</dd>
+  <dt>Dimensions</dt>
+  <dd>12 × 8 × 1 in</dd>
+  <dt>Material</dt>
+  <dd>Aluminum</dd>
+  <dt>Color</dt>
+  <dd>Space gray</dd>
+  <dt>Warranty</dt>
+  <dd>1 year</dd>
+</description-list-ui>
+```
+
+## Programmatic
+
+```html
+<description-list-ui layout="inline" align="between" items='[{"term":"CPU","description":"Apple M4"},{"term":"RAM","description":"16 GB"},{"term":"Storage","description":"512 GB SSD"}]'></description-list-ui>
+```

package/components/divider/divider.examples.md

@@ -0,0 +1,31 @@
+# divider — Examples
+
+## horizontal (default)
+
+```html
+<p>Content above the divider</p>
+<divider-ui></divider-ui>
+<p>Content below the divider</p>
+```
+
+## with label
+
+```html
+<button-ui text="Sign in with Google" variant="outline" style="width:100%;"></button-ui>
+<divider-ui label="or"></divider-ui>
+<button-ui text="Sign in with Email" variant="outline" style="width:100%;"></button-ui>
+```
+
+## vertical
+
+```html
+<div style="display:flex; align-items:center; gap:var(--a-space-3); height:40px;">
+  <span>Home</span>
+  <divider-ui vertical></divider-ui>
+  <span>Products</span>
+  <divider-ui vertical></divider-ui>
+  <span>About</span>
+  <divider-ui vertical></divider-ui>
+  <span>Contact</span>
+</div>
+```

package/components/drawer/drawer.examples.md

@@ -0,0 +1,63 @@
+# drawer — Examples
+
+## Authoring
+
+```html
+<drawer-ui side="right" size="md">
+  <header>
+    <span slot="icon">
+      <avatar-ui icon="user"></avatar-ui>
+    </span>
+    <span slot="heading">
+      <text-ui strong>Profile</text-ui>
+      <badge-ui text="Pro" variant="accent"></badge-ui>
+    </span>
+    <span slot="description">
+      <text-ui color="subtle" size="sm">Update your account</text-ui>
+    </span>
+  </header>
+  <section>...</section>
+  <footer>
+    <grid-ui>
+      <button-ui text="Cancel" variant="ghost"></button-ui>
+      <button-ui text="Save" variant="primary"></button-ui>
+    </grid-ui>
+  </footer>
+</drawer-ui>
+```
+
+## side
+
+```html
+<button-ui text="Left" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
+<drawer-ui text="Navigation" side="left" size="sm">
+  <section>
+    <col-ui gap="1">
+      <button-ui text="Dashboard" icon="house" variant="ghost"></button-ui>
+      <button-ui text="Projects" icon="folder" variant="ghost"></button-ui>
+      <button-ui text="Settings" icon="gear" variant="ghost"></button-ui>
+    </col-ui>
+  </section>
+</drawer-ui>
+```
+
+## size
+
+```html
+<button-ui text="Small" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
+<drawer-ui text="Filters" side="right" size="sm">
+  <section>
+    <col-ui gap="2">
+      <field-ui label="In stock" inline>
+        <check-ui checked></check-ui>
+      </field-ui>
+      <field-ui label="On sale" inline>
+        <check-ui></check-ui>
+      </field-ui>
+      <field-ui label="Free shipping" inline>
+        <check-ui></check-ui>
+      </field-ui>
+    </col-ui>
+  </section>
+</drawer-ui>
+```

package/components/embed/embed.examples.md

@@ -0,0 +1,19 @@
+# embed — Examples
+
+## Default
+
+```html
+<embed-ui src="https://example.com"></embed-ui>
+```
+
+## aspect
+
+```html
+<embed-ui src="https://example.com" aspect="16/9"></embed-ui>
+```
+
+## height
+
+```html
+<embed-ui src="https://example.com" height="250"></embed-ui>
+```

package/components/empty-state/empty-state.examples.md

@@ -0,0 +1,21 @@
+# empty-state — Examples
+
+## Basic
+
+```html
+<empty-state-ui heading="No items" description="There are no items to display yet."></empty-state-ui>
+```
+
+## With Icon
+
+```html
+<empty-state-ui icon="magnifying-glass" heading="No results" description="Try adjusting your search or filter criteria."></empty-state-ui>
+```
+
+## With Action
+
+```html
+<empty-state-ui icon="plus-circle" heading="No projects" description="Create your first project to get started.">
+  <button-ui slot="action" text="Create Project" variant="primary"></button-ui>
+</empty-state-ui>
+```

package/components/feed/feed.examples.md

@@ -0,0 +1,19 @@
+# feed — Examples
+
+## text
+
+```html
+<button-ui text="Post 'Saved.'" variant="outline" size="sm" onclick="customElements.whenDefined('feed-ui').then(()=>import('/packages/web-components/components/feed/feed.js').then(m=>m.UIFeed.post({text:'Saved.',variant:'success'})))"></button-ui>
+```
+
+## variant
+
+```html
+<button-ui text="Default" variant="outline" size="sm" onclick="import('/packages/web-components/components/feed/feed.js').then(m=>m.UIFeed.post({text:'Default notification',variant:'default'}))"></button-ui>
+```
+
+## position
+
+```html
+<button-ui text="Top Left" variant="outline" size="sm" onclick="import('/packages/web-components/components/feed/feed.js').then(m=>m.UIFeed.post({text:'Top left',variant:'info',position:'top-left'}))"></button-ui>
+```