@adia-ai/web-components 0.6.6 → 0.6.7

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

package/components/segment/segment.examples.md

@@ -0,0 +1,32 @@
+# segment — Examples
+
+## basic
+
+```html
+<segmented-ui>
+  <segment-ui value="overview" text="Overview"></segment-ui>
+  <segment-ui value="features" text="Features"></segment-ui>
+  <segment-ui value="pricing" text="Pricing"></segment-ui>
+</segmented-ui>
+```
+
+## text
+
+```html
+<segmented-ui>
+  <segment-ui value="d" text="Daily"></segment-ui>
+  <segment-ui value="w" text="Weekly"></segment-ui>
+  <segment-ui value="m" text="Monthly"></segment-ui>
+  <segment-ui value="y" text="Yearly"></segment-ui>
+</segmented-ui>
+```
+
+## disabled
+
+```html
+<segmented-ui>
+  <segment-ui value="free" text="Free"></segment-ui>
+  <segment-ui value="pro" text="Pro"></segment-ui>
+  <segment-ui value="enterprise" text="Enterprise" disabled></segment-ui>
+</segmented-ui>
+```

package/components/segmented/segmented.examples.md

@@ -0,0 +1,31 @@
+# segmented — Examples
+
+## basic (3 segments)
+
+```html
+<segmented-ui>
+  <segment-ui value="daily" text="Daily"></segment-ui>
+  <segment-ui value="weekly" text="Weekly"></segment-ui>
+  <segment-ui value="monthly" text="Monthly"></segment-ui>
+</segmented-ui>
+```
+
+## pre-selected
+
+```html
+<segmented-ui value="weekly">
+  <segment-ui value="daily" text="Daily"></segment-ui>
+  <segment-ui value="weekly" text="Weekly"></segment-ui>
+  <segment-ui value="monthly" text="Monthly"></segment-ui>
+</segmented-ui>
+```
+
+## disabled segment
+
+```html
+<segmented-ui value="list">
+  <segment-ui value="list" text="List"></segment-ui>
+  <segment-ui value="grid" text="Grid"></segment-ui>
+  <segment-ui value="kanban" text="Kanban" disabled></segment-ui>
+</segmented-ui>
+```

package/components/select/select.examples.md

@@ -0,0 +1,49 @@
+# select — Examples
+
+## basic
+
+```html
+<field-ui label="Fruit">
+  <select-ui placeholder="Pick a fruit">
+    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="cherry">Cherry</option>
+    <option value="dragonfruit">Dragonfruit</option>
+  </select-ui>
+</field-ui>
+```
+
+## size
+
+```html
+<field-ui label="Small">
+  <select-ui size="sm" placeholder="Pick a fruit">
+    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="cherry">Cherry</option>
+  </select-ui>
+</field-ui>
+```
+
+## grouped options
+
+```html
+<field-ui label="Location">
+  <select-ui placeholder="Choose a city">
+    <optgroup label="North America">
+      <option value="nyc">New York</option>
+      <option value="sf">San Francisco</option>
+      <option value="toronto">Toronto</option>
+    </optgroup>
+    <optgroup label="Europe">
+      <option value="london">London</option>
+      <option value="paris">Paris</option>
+      <option value="berlin">Berlin</option>
+    </optgroup>
+    <optgroup label="Asia">
+      <option value="tokyo">Tokyo</option>
+      <option value="singapore">Singapore</option>
+    </optgroup>
+  </select-ui>
+</field-ui>
+```

package/components/skeleton/skeleton.examples.md

@@ -0,0 +1,19 @@
+# skeleton — Examples
+
+## width / height
+
+```html
+<skeleton-ui width="100px" height="1em"></skeleton-ui>
+```
+
+## radius
+
+```html
+<skeleton-ui width="120px" height="2em" radius="none"></skeleton-ui>
+```
+
+## static
+
+```html
+<skeleton-ui width="150px" height="1.5em"></skeleton-ui>
+```

package/components/slider/slider.examples.md

@@ -0,0 +1,21 @@
+# slider — Examples
+
+## Sizes
+
+```html
+<slider-ui size="lg" value="60"></slider-ui>
+```
+
+## value (default)
+
+```html
+<slider-ui value="50"></slider-ui>
+```
+
+## label + value readout
+
+```html
+<field-ui label="Volume">
+  <slider-ui value="75"></slider-ui>
+</field-ui>
+```