@adia-ai/web-components 0.6.4 → 0.6.7

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

package/components/page/page.examples.md

@@ -0,0 +1,46 @@
+# page — Examples
+
+## Basic usage
+
+```html
+<page-ui max-width="prose" padding="6">
+  <header-ui>
+    <text-ui variant="title">Welcome back</text-ui>
+  </header-ui>
+  <section-ui>
+    <text-ui>Sign in to continue.</text-ui>
+  </section-ui>
+  <footer-ui>
+    <button-ui text="Sign in" variant="solid" stretch></button-ui>
+  </footer-ui>
+</page-ui>
+```
+
+## Sticky header
+
+```html
+<page-ui max-width="prose" padding="6" sticky-header>
+  <header-ui>
+    <text-ui variant="title">Long article</text-ui>
+  </header-ui>
+  <section-ui>
+    <!-- long content -->
+  </section-ui>
+</page-ui>
+```
+
+## Composition with <admin-shell>
+
+```html
+<admin-shell>
+  <header-ui slot="leading">…</header-ui>
+  <aside-ui slot="leading">…</aside-ui>
+  <section-ui>
+    <page-ui max-width="prose" padding="6">
+      <!-- omit [scroll] — the shell scrolls -->
+      <header-ui>…</header-ui>
+      <section-ui>…</section-ui>
+    </page-ui>
+  </section-ui>
+</admin-shell>
+```

package/components/pagination/pagination.examples.md

@@ -0,0 +1,19 @@
+# pagination — Examples
+
+## basic (5 pages)
+
+```html
+<pagination-ui page="1" total="5"></pagination-ui>
+```
+
+## variant
+
+```html
+<pagination-ui page="3" total="10"></pagination-ui>
+```
+
+## size
+
+```html
+<pagination-ui size="sm" total="100" page="1"></pagination-ui>
+```

package/components/pane/pane.examples.md

@@ -0,0 +1,40 @@
+# pane — Examples
+
+## basic
+
+```html
+<pane-ui>
+  <header>Details</header>
+  <section>
+    <div data-col>
+      <p>This is basic pane content. Click the header to collapse.</p>
+    </div>
+  </section>
+</pane-ui>
+```
+
+## collapsed
+
+```html
+<pane-ui collapsed>
+  <header>Collapsed Pane</header>
+  <section>
+    <div data-col>
+      <p>This content is hidden until the pane is expanded.</p>
+    </div>
+  </section>
+</pane-ui>
+```
+
+## resizable
+
+```html
+<pane-ui resizable min-width="200" max-width="500" style="width:300px;">
+  <header>Resizable</header>
+  <section>
+    <div data-col>
+      <p>Drag the right edge to resize this pane between 200px and 500px.</p>
+    </div>
+  </section>
+</pane-ui>
+```

package/components/pipeline-status/pipeline-status.examples.md

@@ -0,0 +1,19 @@
+# pipeline-status — Examples
+
+## stage
+
+```html
+<pipeline-status-ui stage="Building catalog" message="Reading 100 patterns from disk..."></pipeline-status-ui>
+```
+
+## message
+
+```html
+<pipeline-status-ui stage="Running evals" message="32 / 100 intents scored..."></pipeline-status-ui>
+```
+
+## complete
+
+```html
+<pipeline-status-ui stage="Done" message="All 100 intents passed" status="completed"></pipeline-status-ui>
+```

package/components/popover/popover.examples.md

@@ -0,0 +1,34 @@
+# popover — Examples
+
+## click trigger
+
+```html
+<popover-ui trigger="click">
+  <button-ui slot="trigger" text="Click me" variant="outline"></button-ui>
+  <div slot="content" style="padding:var(--a-space-3);">
+    <p>This popover opens on click and closes on click outside or Escape.</p>
+  </div>
+</popover-ui>
+```
+
+## hover trigger
+
+```html
+<popover-ui trigger="hover">
+  <button-ui slot="trigger" text="Hover me" variant="outline"></button-ui>
+  <div slot="content" style="padding:var(--a-space-3);">
+    <p>This popover opens on hover and stays open while the pointer is over it.</p>
+  </div>
+</popover-ui>
+```
+
+## placement
+
+```html
+<popover-ui placement="bottom">
+  <button-ui slot="trigger" text="Bottom" variant="outline" size="sm"></button-ui>
+  <div slot="content" style="padding:var(--a-space-3);">
+    <p>Placed below the trigger.</p>
+  </div>
+</popover-ui>
+```

package/components/progress/progress.examples.md

@@ -0,0 +1,19 @@
+# progress — Examples
+
+## value
+
+```html
+<progress-ui value="0" style="width:200px"></progress-ui>
+```
+
+## indeterminate
+
+```html
+<progress-ui style="width:200px"></progress-ui>
+```
+
+## variant
+
+```html
+<progress-ui value="60" variant="bar" style="width:200px"></progress-ui>
+```

package/components/progress-row/progress-row.examples.md

@@ -0,0 +1,19 @@
+# progress-row — Examples
+
+## Basic
+
+```html
+<progress-row-ui label="Storage" value="42"></progress-row-ui>
+```
+
+## With Meta
+
+```html
+<progress-row-ui label="Documents" value="65" meta="6.5 GB / 10 GB"></progress-row-ui>
+```
+
+## Variants
+
+```html
+<progress-row-ui label="Healthy" value="30" meta="30%" variant="success"></progress-row-ui>
+```

package/components/radio/radio.examples.md

@@ -0,0 +1,19 @@
+# radio — Examples
+
+## checked
+
+```html
+<radio-ui label="Unchecked" name="demo-state"></radio-ui>
+```
+
+## disabled
+
+```html
+<radio-ui label="Disabled Unchecked" name="demo-dis" disabled></radio-ui>
+```
+
+## label
+
+```html
+<radio-ui label="With Label" name="demo-label"></radio-ui>
+```

package/components/range/range.examples.md

@@ -0,0 +1,19 @@
+# range — Examples
+
+## default
+
+```html
+<range-ui value="50"></range-ui>
+```
+
+## label + value + suffix
+
+```html
+<range-ui label="Width" value="200" min="0" max="500" suffix="px"></range-ui>
+```
+
+## min / max / step
+
+```html
+<range-ui label="Font Size" value="16" min="8" max="72" step="1" suffix="px"></range-ui>
+```

package/components/rating/rating.examples.md

@@ -0,0 +1,19 @@
+# rating — Examples
+
+## Basic
+
+```html
+<rating-ui value="3" readonly></rating-ui>
+```
+
+## Interactive
+
+```html
+<rating-ui value="0" name="rating-basic"></rating-ui>
+```
+
+## icon
+
+```html
+<rating-ui value="4" icon="heart" variant="warning" readonly></rating-ui>
+```

package/components/richtext/richtext.examples.md

@@ -0,0 +1,19 @@
+# richtext — Examples
+
+## markdown
+
+```html
+<richtext-ui markdown="# Hello world Welcome to **AdiaUI**. This paragraph was parsed from markdown: - Lists - Render - Cleanly `inline code` and [links](https://example.com) work too."></richtext-ui>
+```
+
+## src
+
+```html
+<richtext-ui src="/README.md"></richtext-ui>
+```
+
+## code blocks
+
+```html
+<richtext-ui markdown="## Example ```js function greet(name) { return `Hello, ${name}!`; } ``` Inline `code` also works."></richtext-ui>
+```

package/components/row/row.examples.md

@@ -0,0 +1,11 @@
+# row — Examples
+
+## Basic usage
+
+```html
+<row-ui gap="md">
+  <avatar-ui text="KG" size="sm"></avatar-ui>
+  <text-ui>Kim Granlund</text-ui>
+  <tag-ui text="Owner" size="sm"></tag-ui>
+</row-ui>
+```

package/components/search/search.examples.md

@@ -0,0 +1,19 @@
+# search — Examples
+
+## Default
+
+```html
+<search-ui></search-ui>
+```
+
+## placeholder
+
+```html
+<search-ui placeholder="Find components..."></search-ui>
+```
+
+## debounce
+
+```html
+<search-ui debounce="100" placeholder="Fast (100ms)"></search-ui>
+```

package/components/section/section.examples.md

@@ -0,0 +1,37 @@
+# section — Examples
+
+## Basic usage
+
+```html
+<card-ui>
+  <header-ui>
+    <text-ui variant="title">Settings</text-ui>
+  </header-ui>
+  <section-ui>
+    <col-ui gap="md">
+      <field-ui label="Name">
+        <input-ui name="name"></input-ui>
+      </field-ui>
+      <field-ui label="Email">
+        <input-ui name="email" type="email"></input-ui>
+      </field-ui>
+    </col-ui>
+  </section-ui>
+</card-ui>
+```
+
+## Bleed
+
+```html
+<card-ui>
+  <header-ui>
+    <text-ui variant="title">Cover image</text-ui>
+  </header-ui>
+  <section-ui bleed>
+    <img src="cover.jpg" style="width: 100%; display: block;">
+  </section-ui>
+  <section-ui>
+    <text-ui>Caption text inside a normal padded section.</text-ui>
+  </section-ui>
+</card-ui>
+```