@adia-ai/web-components 0.6.6 → 0.6.8

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

package/components/stack/stack.examples.md

@@ -0,0 +1,10 @@
+# stack — Examples
+
+## Basic usage
+
+```html
+<stack-ui>
+  <image-ui src="/avatar.jpg"></image-ui>
+  <badge-ui text="3" variant="solid" color="danger"></badge-ui>
+</stack-ui>
+```

package/components/stat/stat.examples.md

@@ -0,0 +1,19 @@
+# stat — Examples
+
+## Basic
+
+```html
+<stat-ui value="1,234" label="Total Users"></stat-ui>
+```
+
+## value
+
+```html
+<stat-ui value="1,234" label="Users"></stat-ui>
+```
+
+## label
+
+```html
+<stat-ui value="847" label="Active Users"></stat-ui>
+```

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

@@ -0,0 +1,19 @@
+# step-progress — Examples
+
+## value
+
+```html
+<step-progress-ui value="0" total="10" caption="Not started"></step-progress-ui>
+```
+
+## total
+
+```html
+<step-progress-ui value="3" total="3" caption="Short flow"></step-progress-ui>
+```
+
+## caption
+
+```html
+<step-progress-ui value="2" total="5"></step-progress-ui>
+```

package/components/stepper/stepper.examples.md

@@ -0,0 +1,37 @@
+# stepper — Examples
+
+## Horizontal (default)
+
+```html
+<stepper-ui step="2">
+  <stepper-item-ui text="Account"></stepper-item-ui>
+  <stepper-item-ui text="Details"></stepper-item-ui>
+  <stepper-item-ui text="Review"></stepper-item-ui>
+  <stepper-item-ui text="Confirm"></stepper-item-ui>
+</stepper-ui>
+```
+
+## Vertical
+
+```html
+<stepper-ui orientation="vertical" step="1">
+  <stepper-item-ui text="Select plan" description="Choose your subscription"></stepper-item-ui>
+  <stepper-item-ui text="Payment" description="Enter payment details"></stepper-item-ui>
+  <stepper-item-ui text="Confirmation" description="Review and submit"></stepper-item-ui>
+</stepper-ui>
+```
+
+## Interactive
+
+```html
+<stepper-ui id="stepper-interactive" step="1">
+  <stepper-item-ui text="Step 1"></stepper-item-ui>
+  <stepper-item-ui text="Step 2"></stepper-item-ui>
+  <stepper-item-ui text="Step 3"></stepper-item-ui>
+  <stepper-item-ui text="Step 4"></stepper-item-ui>
+</stepper-ui>
+<div style="display:flex; gap:var(--a-space-2); margin-top:var(--a-space-3);">
+  <button-ui id="stepper-prev" text="Previous" variant="outline"></button-ui>
+  <button-ui id="stepper-next" text="Next" variant="primary"></button-ui>
+</div>
+```

package/components/stream/stream.examples.md

@@ -0,0 +1,19 @@
+# stream — Examples
+
+## basic
+
+```html
+<stream-ui>This is static content inside a stream element. Assign an AsyncIterable to the .tokens property to begin streaming.</stream-ui>
+```
+
+## hide-cursor
+
+```html
+<stream-ui streaming>Streaming with cursor...</stream-ui>
+```
+
+## pace
+
+```html
+<stream-ui>Pace is set programmatically when assigning .tokens. A value of 0 renders tokens immediately; higher values create a typewriter effect.</stream-ui>
+```

package/components/swatch/swatch.examples.md

@@ -0,0 +1,23 @@
+# swatch — Examples
+
+## shapes
+
+```html
+<swatch-ui shape="dot" color="var(--a-data-0)" label="Revenue"></swatch-ui>
+```
+
+## sizes
+
+```html
+<row-ui gap="3" align="center">
+  <swatch-ui shape="dot" size="sm" color="var(--a-data-0)" label="sm"></swatch-ui>
+  <swatch-ui shape="dot" size="md" color="var(--a-data-0)" label="md"></swatch-ui>
+  <swatch-ui shape="dot" size="lg" color="var(--a-data-0)" label="lg"></swatch-ui>
+</row-ui>
+```
+
+## composition — chart-legend-ui
+
+```html
+<chart-legend-ui shape="dot" position="bottom" id="demo-legend-dot"></chart-legend-ui>
+```