@adia-ai/web-components 0.6.6 → 0.6.8

package/components/field/field.examples.md

@@ -0,0 +1,29 @@
+# field — Examples
+
+## Default layout
+
+```html
+<field-ui label="Email">
+  <input-ui type="email" placeholder="you@example.com"></input-ui>
+</field-ui>
+```
+
+## Inline layout
+
+```html
+<field-ui inline label="Search">
+  <input-ui type="search" placeholder="Type a command…"></input-ui>
+</field-ui>
+```
+
+## Any form control
+
+```html
+<field-ui label="Priority">
+  <select-ui>
+    <option value="low">Low</option>
+    <option value="med" selected>Medium</option>
+    <option value="high">High</option>
+  </select-ui>
+</field-ui>
+```

package/components/fields/fields.examples.md

@@ -0,0 +1,58 @@
+# fields — Examples
+
+## default — stacked
+
+```html
+<fields-ui>
+  <field-ui label="Name">
+    <input-ui type="text" placeholder="Jane Doe"></input-ui>
+  </field-ui>
+  <field-ui label="Email">
+    <input-ui type="email" placeholder="jane@example.com"></input-ui>
+  </field-ui>
+</fields-ui>
+```
+
+## rows — 3-up
+
+```html
+<fields-ui>
+  <field-ui label="Status" rows="2">
+    <select-ui value="todo">
+      <option value="todo">To do</option>
+      <option value="doing">Doing</option>
+      <option value="done">Done</option>
+    </select-ui>
+  </field-ui>
+  <field-ui label="Priority" rows="2">
+    <select-ui value="0">
+      <option value="0">Normal</option>
+      <option value="1">High</option>
+      <option value="2">Urgent</option>
+    </select-ui>
+  </field-ui>
+  <field-ui label="Group" rows="2">
+    <select-ui value="alpha">
+      <option value="alpha">Alpha</option>
+      <option value="beta">Beta</option>
+    </select-ui>
+  </field-ui>
+</fields-ui>
+```
+
+## inline
+
+```html
+<fields-ui inline>
+  <field-ui label="Search">
+    <input-ui type="search" placeholder="Type to search…"></input-ui>
+  </field-ui>
+  <field-ui label="Kind">
+    <select-ui value="all">
+      <option value="all">All</option>
+      <option value="docs">Docs</option>
+      <option value="components">Components</option>
+    </select-ui>
+  </field-ui>
+</fields-ui>
+```

package/components/footer/footer.examples.md

@@ -0,0 +1,18 @@
+# footer — Examples
+
+## Basic usage
+
+```html
+<modal-ui open>
+  <header-ui>
+    <text-ui variant="title">Confirm action</text-ui>
+  </header-ui>
+  <section-ui>
+    <text-ui>Are you sure?</text-ui>
+  </section-ui>
+  <footer-ui justify="end">
+    <button-ui text="Cancel" variant="ghost"></button-ui>
+    <button-ui text="Confirm" variant="solid"></button-ui>
+  </footer-ui>
+</modal-ui>
+```

package/components/grid/grid.examples.md

@@ -0,0 +1,21 @@
+# grid — Examples
+
+## Basic usage
+
+```html
+<grid-ui columns="3" gap="4">
+  <card-ui>…</card-ui>
+  <card-ui>…</card-ui>
+  <card-ui>…</card-ui>
+</grid-ui>
+```
+
+## Asymmetric layouts via [span]
+
+```html
+<!-- 2:1 split -->
+<grid-ui columns="3" gap="4">
+  <card-ui span="2">Main panel</card-ui>
+  <card-ui>Side panel</card-ui>
+</grid-ui>
+```

package/components/header/header.examples.md

@@ -0,0 +1,32 @@
+# header — Examples
+
+## Basic usage
+
+```html
+<card-ui>
+  <header-ui>
+    <text-ui variant="title">Card title</text-ui>
+    <button-ui slot="action" icon="dots-three" variant="ghost" size="sm"></button-ui>
+  </header-ui>
+  <section-ui>
+    <text-ui>Card body content.</text-ui>
+  </section-ui>
+</card-ui>
+```
+
+## Inside different container parents
+
+```html
+<!-- Card: padded, bordered bottom -->
+<card-ui>
+  <header-ui>…</header-ui>
+</card-ui>
+<!-- Drawer: padded, sticky -->
+<drawer-ui open>
+  <header-ui>…</header-ui>
+</drawer-ui>
+<!-- Page: prose-aligned, optional sticky-header sentinel -->
+<page-ui sticky-header>
+  <header-ui>…</header-ui>
+</page-ui>
+```

package/components/heatmap/heatmap.examples.md

@@ -0,0 +1,19 @@
+# heatmap — Examples
+
+## day-grid (GitHub contributions)
+
+```html
+<heatmap-ui id="hm-days" type="day-grid" rows="7" cols="52" start-date="2025-01-01" color-scheme="data-ramp"></heatmap-ui>
+```
+
+## matrix
+
+```html
+<heatmap-ui id="hm-matrix" type="matrix" rows="7" cols="12" color-scheme="accent"></heatmap-ui>
+```
+
+## Data stream (data-stream-*)
+
+```html
+<heatmap-ui type="matrix" rows="5" cols="4" color-scheme="accent" aria-label="Commit activity from activity.json" data-stream-src="/site/mock/activity.json"></heatmap-ui>
+```

package/components/icon/icon.examples.md

@@ -0,0 +1,19 @@
+# icon — Examples
+
+## name
+
+```html
+<icon-ui name="gear"></icon-ui>
+```
+
+## size
+
+```html
+<icon-ui name="star" size="xs"></icon-ui>
+```
+
+## label
+
+```html
+<icon-ui name="bell" label="Notifications"></icon-ui>
+```

package/components/image/image.examples.md

@@ -0,0 +1,19 @@
+# image — Examples
+
+## Default
+
+```html
+<image-ui src="https://picsum.photos/seed/img-demo/300/200" alt="Sample landscape" width="300" height="200"></image-ui>
+```
+
+## radius
+
+```html
+<image-ui src="https://picsum.photos/seed/r-sm/150/150" alt="Small radius" width="150" height="150" radius="sm"></image-ui>
+```
+
+## fit
+
+```html
+<image-ui src="https://picsum.photos/seed/fit-cover/400/200" alt="Cover" width="200" height="200" fit="cover" radius="md"></image-ui>
+```

package/components/input/input.examples.md

@@ -0,0 +1,21 @@
+# input — Examples
+
+## label
+
+```html
+<input-ui label="Label" placeholder="Input value"></input-ui>
+```
+
+## size
+
+```html
+<field-ui label="Small">
+  <input-ui size="sm" placeholder="Enter a value"></input-ui>
+</field-ui>
+```
+
+## placeholder
+
+```html
+<input-ui placeholder="Search..."></input-ui>
+```

package/components/inspector/inspector.examples.md

@@ -0,0 +1,27 @@
+# inspector — Examples
+
+## default
+
+```html
+<inspector-ui>{
+  "name": "Alex",
+  "role": "admin",
+  "active": true
+}</inspector-ui>
+```
+
+## nested
+
+```html
+<inspector-ui>{
+  "user":     { "id": 1, "name": "Jane" },
+  "settings": { "theme": "dark", "notifications": true },
+  "tags":     ["admin", "beta"]
+}</inspector-ui>
+```
+
+## value
+
+```html
+<inspector-ui value="catalog"></inspector-ui>
+```

package/components/kbd/kbd.examples.md

@@ -0,0 +1,29 @@
+# kbd — Examples
+
+## Single Keys
+
+```html
+<kbd-ui>&#8984;</kbd-ui>
+```
+
+## Combinations
+
+```html
+<span style="display:inline-flex; gap:var(--a-space-1); align-items:center;">
+  <kbd-ui>&#8984;</kbd-ui>
+  <kbd-ui>K</kbd-ui>
+</span>
+```
+
+## In-Context
+
+```html
+<p style="margin:0;">
+  Press
+  <kbd-ui>&#8984;</kbd-ui>
+  <kbd-ui>K</kbd-ui>
+  to open the command palette, or
+  <kbd-ui>&#9099;</kbd-ui>
+  to close it.
+</p>
+```

package/components/link/link.examples.md

@@ -0,0 +1,25 @@
+# link — Examples
+
+## variant
+
+```html
+<link-ui text="Default" href="#"></link-ui>
+```
+
+## inline in prose
+
+```html
+<text-ui>
+  I agree to the
+  <link-ui text="Terms of Service" href="#terms"></link-ui>
+  and
+  <link-ui text="Privacy Policy" href="#privacy"></link-ui>
+  .
+</text-ui>
+```
+
+## target
+
+```html
+<link-ui text="External link" href="https://example.com" target="_blank"></link-ui>
+```

package/components/list/list.examples.md

@@ -0,0 +1,33 @@
+# list — Examples
+
+## basic
+
+```html
+<list-ui>
+  <list-item-ui text="Dashboard"></list-item-ui>
+  <list-item-ui text="Settings"></list-item-ui>
+  <list-item-ui text="Profile"></list-item-ui>
+  <list-item-ui text="Log out"></list-item-ui>
+</list-ui>
+```
+
+## with icons
+
+```html
+<list-ui>
+  <list-item-ui icon="house" text="Home"></list-item-ui>
+  <list-item-ui icon="gear" text="Settings"></list-item-ui>
+  <list-item-ui icon="user" text="Profile"></list-item-ui>
+  <list-item-ui icon="sign-out" text="Log out"></list-item-ui>
+</list-ui>
+```
+
+## with descriptions
+
+```html
+<list-ui>
+  <list-item-ui icon="envelope" text="Email" description="Receive notifications via email"></list-item-ui>
+  <list-item-ui icon="bell" text="Push" description="Browser push notifications"></list-item-ui>
+  <list-item-ui icon="chat-circle" text="SMS" description="Text message alerts"></list-item-ui>
+</list-ui>
+```

package/components/menu/menu.examples.md

@@ -0,0 +1,37 @@
+# menu — Examples
+
+## basic
+
+```html
+<menu-ui>
+  <button-ui slot="trigger" text="Actions" variant="outline"></button-ui>
+  <menu-item-ui text="Edit" value="edit"></menu-item-ui>
+  <menu-item-ui text="Duplicate" value="duplicate"></menu-item-ui>
+  <menu-item-ui text="Archive" value="archive"></menu-item-ui>
+</menu-ui>
+```
+
+## with icons
+
+```html
+<menu-ui>
+  <button-ui slot="trigger" icon="dots-three-vertical" variant="ghost"></button-ui>
+  <menu-item-ui icon="pencil" text="Edit" value="edit"></menu-item-ui>
+  <menu-item-ui icon="copy" text="Duplicate" value="duplicate"></menu-item-ui>
+  <menu-item-ui icon="download" text="Download" value="download"></menu-item-ui>
+</menu-ui>
+```
+
+## with divider
+
+```html
+<menu-ui>
+  <button-ui slot="trigger" text="File" variant="outline"></button-ui>
+  <menu-item-ui icon="file-plus" text="New" value="new"></menu-item-ui>
+  <menu-item-ui icon="folder-open" text="Open" value="open"></menu-item-ui>
+  <menu-item-ui icon="floppy-disk" text="Save" value="save"></menu-item-ui>
+  <menu-divider-ui></menu-divider-ui>
+  <menu-item-ui icon="export" text="Export" value="export"></menu-item-ui>
+  <menu-item-ui icon="printer" text="Print" value="print"></menu-item-ui>
+</menu-ui>
+```

package/components/modal/modal.examples.md

@@ -0,0 +1,43 @@
+# modal — Examples
+
+## basic
+
+```html
+<button-ui text="Open Modal" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
+<modal-ui text="Confirm Action">
+  <p>Are you sure you want to proceed? This action requires your confirmation.</p>
+  <div slot="footer" style="display:flex; gap:var(--a-space-2); justify-content:flex-end;">
+    <button-ui text="Cancel" variant="ghost" onclick="this.closest('modal-ui').open=false"></button-ui>
+    <button-ui text="Confirm" variant="primary" onclick="this.closest('modal-ui').open=false"></button-ui>
+  </div>
+</modal-ui>
+```
+
+## size
+
+```html
+<button-ui text="Small" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
+<modal-ui text="Small Modal" size="sm">
+  <p>A compact modal for simple confirmations.</p>
+</modal-ui>
+```
+
+## text
+
+```html
+<button-ui text="With Title" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
+<modal-ui text="Edit Profile">
+  <div style="display:flex; flex-direction:column; gap:var(--a-space-3);">
+    <field-ui label="Name">
+      <input-ui placeholder="Your name"></input-ui>
+    </field-ui>
+    <field-ui label="Email">
+      <input-ui placeholder="you@example.com"></input-ui>
+    </field-ui>
+  </div>
+  <div slot="footer" style="display:flex; gap:var(--a-space-2); justify-content:flex-end;">
+    <button-ui text="Cancel" variant="ghost" onclick="this.closest('modal-ui').open=false"></button-ui>
+    <button-ui text="Save" variant="primary" onclick="this.closest('modal-ui').open=false"></button-ui>
+  </div>
+</modal-ui>
+```

package/components/nav/nav.examples.md

@@ -0,0 +1,39 @@
+# nav — Examples
+
+## variant — primary
+
+```html
+<nav-ui style="width:240px;height:280px;border:1px solid var(--a-border);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
+  <nav-item-ui text="Dashboard" icon="house" value="dashboard" selected></nav-item-ui>
+  <nav-item-ui text="Reports" icon="chart-bar" value="reports"></nav-item-ui>
+  <nav-group-ui text="Settings" icon="gear">
+    <nav-item-ui text="Profile" value="settings/profile"></nav-item-ui>
+    <nav-item-ui text="Billing" value="settings/billing"></nav-item-ui>
+    <nav-item-ui text="Team" value="settings/team"></nav-item-ui>
+  </nav-group-ui>
+</nav-ui>
+```
+
+## variant — section
+
+```html
+<nav-ui variant="section" heading="Documentation" style="width:240px;">
+  <nav-item-ui text="Overview" value="docs/overview" selected></nav-item-ui>
+  <nav-item-ui text="Quickstart" value="docs/quickstart"></nav-item-ui>
+  <nav-item-ui text="API reference" value="docs/api"></nav-item-ui>
+  <nav-item-ui text="Examples" value="docs/examples"></nav-item-ui>
+</nav-ui>
+```
+
+## collapsed
+
+```html
+<nav-ui collapsed style="width:64px;height:280px;border:1px solid var(--a-border);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
+  <nav-item-ui text="Dashboard" icon="house" value="dashboard" selected></nav-item-ui>
+  <nav-item-ui text="Reports" icon="chart-bar" value="reports"></nav-item-ui>
+  <nav-group-ui text="Settings" icon="gear">
+    <nav-item-ui text="Profile" value="settings/profile"></nav-item-ui>
+    <nav-item-ui text="Billing" value="settings/billing"></nav-item-ui>
+  </nav-group-ui>
+</nav-ui>
+```

package/components/nav-group/nav-group.examples.md

@@ -0,0 +1,35 @@
+# nav-group — Examples
+
+## text + icon
+
+```html
+<nav-ui style="width:240px;border:1px solid var(--a-border);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
+  <nav-group-ui text="Settings" icon="gear">
+    <nav-item-ui text="Profile" value="settings/profile"></nav-item-ui>
+    <nav-item-ui text="Billing" value="settings/billing"></nav-item-ui>
+  </nav-group-ui>
+</nav-ui>
+```
+
+## badge
+
+```html
+<nav-ui style="width:240px;border:1px solid var(--a-border);border-radius:var(--a-radius-md);padding:var(--a-space-2);">
+  <nav-group-ui text="Notifications" icon="bell" badge="3" open>
+    <nav-item-ui text="Mentions" value="notif/mentions"></nav-item-ui>
+    <nav-item-ui text="Follows" value="notif/follows"></nav-item-ui>
+  </nav-group-ui>
+</nav-ui>
+```
+
+## variant — section
+
+```html
+<nav-ui variant="section" style="width:240px;">
+  <nav-group-ui text="Reference" variant="section">
+    <nav-item-ui text="Components" value="ref/components"></nav-item-ui>
+    <nav-item-ui text="Tokens" value="ref/tokens"></nav-item-ui>
+    <nav-item-ui text="Patterns" value="ref/patterns"></nav-item-ui>
+  </nav-group-ui>
+</nav-ui>
+```

package/components/nav-item/nav-item.examples.md

@@ -0,0 +1,25 @@
+# nav-item — Examples
+
+## text + icon
+
+```html
+<nav-ui style="width:200px;">
+  <nav-item-ui text="Dashboard" value="dashboard"></nav-item-ui>
+</nav-ui>
+```
+
+## selected
+
+```html
+<nav-ui style="width:200px;">
+  <nav-item-ui text="Inbox" icon="envelope" value="inbox" selected></nav-item-ui>
+</nav-ui>
+```
+
+## disabled
+
+```html
+<nav-ui style="width:200px;">
+  <nav-item-ui text="Archived" icon="archive" value="archived" disabled></nav-item-ui>
+</nav-ui>
+```

package/components/noodles/noodles.examples.md

@@ -0,0 +1,30 @@
+# noodles — Examples
+
+## curve
+
+```html
+<noodles-ui id="noodle-bezier" style="position:relative; width:400px; height:200px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);">
+  <div data-noodle-port="right" style="position:absolute; left:20px; top:30px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);">Node A</div>
+  <div data-noodle-port="left right" style="position:absolute; left:160px; top:90px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);">Node B</div>
+  <div data-noodle-port="left" style="position:absolute; left:300px; top:40px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);">Node C</div>
+</noodles-ui>
+```
+
+## editable + show-ports
+
+```html
+<noodles-ui id="noodle-editable" editable show-ports style="position:relative; width:400px; height:200px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);">
+  <div data-noodle-port="right bottom" style="position:absolute; left:20px; top:30px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);">Source</div>
+  <div data-noodle-port="left right top" style="position:absolute; left:160px; top:100px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);">Middle</div>
+  <div data-noodle-port="left top" style="position:absolute; left:300px; top:40px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);">Target</div>
+</noodles-ui>
+```
+
+## animated
+
+```html
+<noodles-ui id="noodle-animated" animated style="position:relative; width:400px; height:160px; border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-md);">
+  <div data-noodle-port="right" style="position:absolute; left:20px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);">Start</div>
+  <div data-noodle-port="left" style="position:absolute; left:280px; top:50px; padding:var(--a-space-2) var(--a-space-3); background:var(--a-canvas-2); border:1px solid var(--a-border-subtle); border-radius:var(--a-radius-sm);">End</div>
+</noodles-ui>
+```

package/components/option-card/option-card.examples.md

@@ -0,0 +1,47 @@
+# option-card — Examples
+
+## Default
+
+```html
+<col-ui gap="2" role="radiogroup" aria-label="Demo">
+  <option-card-ui name="demo-1" value="build" checked heading="I'm building a product" description="Spinning up a new project — design, ship, iterate."></option-card-ui>
+  <option-card-ui name="demo-1" value="explore" heading="I'm exploring the product" description="Kicking the tires before bringing a team along."></option-card-ui>
+  <option-card-ui name="demo-1" value="migrate" heading="I'm migrating from another tool" description="Moving an existing workspace and want a smooth port."></option-card-ui>
+</col-ui>
+```
+
+## Rich heading slot
+
+```html
+<col-ui gap="2" role="radiogroup" aria-label="Plan">
+  <option-card-ui name="demo-plan" value="free" description="Up to 5 members · 10 projects · community support">
+    <span slot="heading">
+      Free
+      <text-ui color="subtle" size="sm">· $0/mo</text-ui>
+    </span>
+  </option-card-ui>
+  <option-card-ui name="demo-plan" value="pro" checked description="Unlimited members · advanced charts · 100 GB storage">
+    <span slot="heading">
+      Pro
+      <text-ui color="subtle" size="sm">· $49/mo</text-ui>
+      <badge-ui text="14-day trial" variant="accent"></badge-ui>
+    </span>
+  </option-card-ui>
+  <option-card-ui name="demo-plan" value="team" description="Everything in Pro · SSO · audit log · 1 TB storage">
+    <span slot="heading">
+      Team
+      <text-ui color="subtle" size="sm">· $129/mo</text-ui>
+    </span>
+  </option-card-ui>
+</col-ui>
+```
+
+## With leading icon
+
+```html
+<col-ui gap="2" role="radiogroup" aria-label="Storage">
+  <option-card-ui name="demo-icon" value="local" icon="hard-drive" checked heading="Local storage" description="Files stay on this device. No sync, no upload."></option-card-ui>
+  <option-card-ui name="demo-icon" value="cloud" icon="cloud-arrow-up" heading="Cloud storage" description="Files sync across devices and backup automatically."></option-card-ui>
+  <option-card-ui name="demo-icon" value="hybrid" icon="arrows-clockwise" heading="Hybrid" description="Cache locally, sync changes to the cloud in the background."></option-card-ui>
+</col-ui>
+```

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

@@ -0,0 +1,19 @@
+# otp-input — Examples
+
+## length
+
+```html
+<otp-input-ui></otp-input-ui>
+```
+
+## disabled
+
+```html
+<otp-input-ui disabled></otp-input-ui>
+```
+
+## name
+
+```html
+<otp-input-ui name="otp"></otp-input-ui>
+```