@adia-ai/web-components 0.6.6 → 0.6.7

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>
+```

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>
+```