tutuca 0.9.39 → 0.9.41

package/skill/margaui/components/pagination.md

@@ -0,0 +1,122 @@
+# pagination
+
+_paged-navigation button row_
+
+## What it does
+
+Row of buttons (often inside `join`) for paged navigation.
+
+## When to use
+
+- Multi-page lists, search results.
+
+## Core classes
+
+Built from `join` + `btn`.
+
+## Examples
+
+### Extra small buttons
+
+Source: `playground/components/pagination/extra-small-buttons.html`
+
+```html
+<div class="join">
+  <button class="join-item btn">«</button>
+  <button class="join-item btn">Page 22</button>
+  <button class="join-item btn">»</button>
+</div>
+```
+
+### Nexprev outline buttons with equal width
+
+Source: `playground/components/pagination/nexprev-outline-buttons-with-equal-width.html`
+
+```html
+<div class="join grid grid-cols-2">
+  <button class="join-item btn btn-outline">Previous page</button>
+  <button class="join-item btn btn-outline">Next</button>
+</div>
+```
+
+### Pagination with an active button
+
+Source: `playground/components/pagination/pagination-with-an-active-button.html`
+
+```html
+<div class="join">
+  <button class="join-item btn">1</button>
+  <button class="join-item btn btn-active">2</button>
+  <button class="join-item btn">3</button>
+  <button class="join-item btn">4</button>
+</div>
+```
+
+### Sizes
+
+Source: `playground/components/pagination/sizes.html`
+
+```html
+<div class="join">
+  <button class="join-item btn btn-xs">1</button>
+  <button class="join-item btn btn-xs btn-active">2</button>
+  <button class="join-item btn btn-xs">3</button>
+  <button class="join-item btn btn-xs">4</button>
+</div>
+<div class="join">
+  <button class="join-item btn btn-sm">1</button>
+  <button class="join-item btn btn-sm btn-active">2</button>
+  <button class="join-item btn btn-sm">3</button>
+  <button class="join-item btn btn-sm">4</button>
+</div>
+<div class="join">
+  <button class="join-item btn btn-md">1</button>
+  <button class="join-item btn btn-md btn-active">2</button>
+  <button class="join-item btn btn-md">3</button>
+  <button class="join-item btn btn-md">4</button>
+</div>
+<div class="join">
+  <button class="join-item btn btn-lg">1</button>
+  <button class="join-item btn btn-lg btn-active">2</button>
+  <button class="join-item btn btn-lg">3</button>
+  <button class="join-item btn btn-lg">4</button>
+</div>
+<div class="join">
+  <button class="join-item btn btn-xl">1</button>
+  <button class="join-item btn btn-xl btn-active">2</button>
+  <button class="join-item btn btn-xl">3</button>
+  <button class="join-item btn btn-xl">4</button>
+</div>
+```
+
+### Using radio inputs
+
+Source: `playground/components/pagination/using-radio-inputs.html`
+
+```html
+<div class="join">
+  <input
+    class="join-item btn btn-square"
+    type="radio"
+    name="options"
+    aria-label="1"
+    checked="checked" />
+  <input class="join-item btn btn-square" type="radio" name="options" aria-label="2" />
+  <input class="join-item btn btn-square" type="radio" name="options" aria-label="3" />
+  <input class="join-item btn btn-square" type="radio" name="options" aria-label="4" />
+</div>
+```
+
+### With a disabled button
+
+Source: `playground/components/pagination/with-a-disabled-button.html`
+
+```html
+<div class="join">
+  <button class="join-item btn">1</button>
+  <button class="join-item btn">2</button>
+  <button class="join-item btn btn-disabled">...</button>
+  <button class="join-item btn">99</button>
+  <button class="join-item btn">100</button>
+</div>
+```

package/skill/margaui/components/progress.md

@@ -0,0 +1,135 @@
+# progress
+
+_linear progress bar (`<progress>`)_
+
+## What it does
+
+Themed `<progress>` bar; supports indeterminate state when `value` is omitted.
+
+## When to use
+
+- Determinate progress (uploads, downloads, multi-step forms).
+- For circular progress, use **radial-progress**.
+- For pure spinners, use **loading**.
+
+## Core classes
+
+`progress`; color `progress-primary|secondary|accent|info|success|warning|error|neutral`.
+
+## Examples
+
+### Progress
+
+Source: `playground/components/progress/progress.html`
+
+```html
+<progress class="progress w-56" value="0" max="100"></progress>
+<progress class="progress w-56" value="10" max="100"></progress>
+<progress class="progress w-56" value="40" max="100"></progress>
+<progress class="progress w-56" value="70" max="100"></progress>
+<progress class="progress w-56" value="100" max="100"></progress>
+```
+
+### Accent color
+
+Source: `playground/components/progress/accent-color.html`
+
+```html
+<progress class="progress progress-accent w-56" value="0" max="100"></progress>
+<progress class="progress progress-accent w-56" value="10" max="100"></progress>
+<progress class="progress progress-accent w-56" value="40" max="100"></progress>
+<progress class="progress progress-accent w-56" value="70" max="100"></progress>
+<progress class="progress progress-accent w-56" value="100" max="100"></progress>
+```
+
+### Error color
+
+Source: `playground/components/progress/error-color.html`
+
+```html
+<progress class="progress progress-error w-56" value="0" max="100"></progress>
+<progress class="progress progress-error w-56" value="10" max="100"></progress>
+<progress class="progress progress-error w-56" value="40" max="100"></progress>
+<progress class="progress progress-error w-56" value="70" max="100"></progress>
+<progress class="progress progress-error w-56" value="100" max="100"></progress>
+```
+
+### Indeterminate without value
+
+Source: `playground/components/progress/indeterminate-without-value.html`
+
+```html
+<progress class="progress w-56"></progress>
+```
+
+### Info color
+
+Source: `playground/components/progress/info-color.html`
+
+```html
+<progress class="progress progress-info w-56" value="0" max="100"></progress>
+<progress class="progress progress-info w-56" value="10" max="100"></progress>
+<progress class="progress progress-info w-56" value="40" max="100"></progress>
+<progress class="progress progress-info w-56" value="70" max="100"></progress>
+<progress class="progress progress-info w-56" value="100" max="100"></progress>
+```
+
+### Neutral color
+
+Source: `playground/components/progress/neutral-color.html`
+
+```html
+<progress class="progress progress-neutral w-56" value="0" max="100"></progress>
+<progress class="progress progress-neutral w-56" value="10" max="100"></progress>
+<progress class="progress progress-neutral w-56" value="40" max="100"></progress>
+<progress class="progress progress-neutral w-56" value="70" max="100"></progress>
+<progress class="progress progress-neutral w-56" value="100" max="100"></progress>
+```
+
+### Primary color
+
+Source: `playground/components/progress/primary-color.html`
+
+```html
+<progress class="progress progress-primary w-56" value="0" max="100"></progress>
+<progress class="progress progress-primary w-56" value="10" max="100"></progress>
+<progress class="progress progress-primary w-56" value="40" max="100"></progress>
+<progress class="progress progress-primary w-56" value="70" max="100"></progress>
+<progress class="progress progress-primary w-56" value="100" max="100"></progress>
+```
+
+### Secondary color
+
+Source: `playground/components/progress/secondary-color.html`
+
+```html
+<progress class="progress progress-secondary w-56" value="0" max="100"></progress>
+<progress class="progress progress-secondary w-56" value="10" max="100"></progress>
+<progress class="progress progress-secondary w-56" value="40" max="100"></progress>
+<progress class="progress progress-secondary w-56" value="70" max="100"></progress>
+<progress class="progress progress-secondary w-56" value="100" max="100"></progress>
+```
+
+### Success color
+
+Source: `playground/components/progress/success-color.html`
+
+```html
+<progress class="progress progress-success w-56" value="0" max="100"></progress>
+<progress class="progress progress-success w-56" value="10" max="100"></progress>
+<progress class="progress progress-success w-56" value="40" max="100"></progress>
+<progress class="progress progress-success w-56" value="70" max="100"></progress>
+<progress class="progress progress-success w-56" value="100" max="100"></progress>
+```
+
+### Warning color
+
+Source: `playground/components/progress/warning-color.html`
+
+```html
+<progress class="progress progress-warning w-56" value="0" max="100"></progress>
+<progress class="progress progress-warning w-56" value="10" max="100"></progress>
+<progress class="progress progress-warning w-56" value="40" max="100"></progress>
+<progress class="progress progress-warning w-56" value="70" max="100"></progress>
+<progress class="progress progress-warning w-56" value="100" max="100"></progress>
+```

package/skill/margaui/components/radial-progress.md

@@ -0,0 +1,67 @@
+# radial-progress
+
+_circular progress indicator_
+
+## What it does
+
+Circular progress indicator driven by CSS custom properties (`--value`, `--size`, `--thickness`).
+
+## When to use
+
+- Compact circular progress, dashboards, KPIs.
+- For linear progress, use **progress**.
+
+## Core classes
+
+`radial-progress` with `style="--value:N"` (and optional `--size`, `--thickness`); colors via standard `text-…`/`bg-…` utilities.
+
+## Examples
+
+### Radial progress
+
+Source: `playground/components/radial-progress/radial-progress.html`
+
+```html
+<div class="radial-progress" style="--value:70;" aria-valuenow="70" role="progressbar">70%</div>
+```
+
+### Custom color
+
+Source: `playground/components/radial-progress/custom-color.html`
+
+```html
+<div class="radial-progress text-primary" style="--value:70;" aria-valuenow="70" role="progressbar">70%</div>
+```
+
+### Custom size and custom thickness
+
+Source: `playground/components/radial-progress/custom-size-and-custom-thickness.html`
+
+```html
+<div class="radial-progress" style="--value:70; --size:12rem; --thickness: 2px;" aria-valuenow="70" role="progressbar">70%</div>
+<div class="radial-progress" style="--value:70; --size:12rem; --thickness: 2rem;" aria-valuenow="70" role="progressbar">70%</div>
+```
+
+### Different values
+
+Source: `playground/components/radial-progress/different-values.html`
+
+```html
+<div class="radial-progress" style="--value:0;" aria-valuenow="0" role="progressbar">0%</div>
+<div class="radial-progress" style="--value:20;" aria-valuenow="20" role="progressbar">20%</div>
+<div class="radial-progress" style="--value:60;" aria-valuenow="60" role="progressbar">60%</div>
+<div class="radial-progress" style="--value:80;" aria-valuenow="80" role="progressbar">80%</div>
+<div class="radial-progress" style="--value:100;" aria-valuenow="100" role="progressbar">100%</div>
+```
+
+### With background color and border
+
+Source: `playground/components/radial-progress/with-background-color-and-border.html`
+
+```html
+<div
+  class="radial-progress bg-primary text-primary-content border-primary border-4"
+  style="--value:70;" aria-valuenow="70" role="progressbar">
+  70%
+</div>
+```

package/skill/margaui/components/radio.md

@@ -0,0 +1,133 @@
+# radio
+
+_styled `<input type="radio">`_
+
+## What it does
+
+Themed replacement for the native radio button.
+
+## When to use
+
+- Single-choice form fields with all options visible.
+- For dropdown single-choice, use **select**.
+
+## Core classes
+
+`radio`; color `radio-primary|secondary|accent|info|success|warning|error|neutral`; size `radio-xs|sm|md|lg|xl`.
+
+## Examples
+
+### Radio
+
+Source: `playground/components/radio/radio.html`
+
+```html
+<input type="radio" name="radio-1" class="radio" checked="checked" />
+<input type="radio" name="radio-1" class="radio" />
+```
+
+### Accent color
+
+Source: `playground/components/radio/accent-color.html`
+
+```html
+<input type="radio" name="radio-6" class="radio radio-accent" checked="checked" />
+<input type="radio" name="radio-6" class="radio radio-accent" />
+```
+
+### Disabled
+
+Source: `playground/components/radio/disabled.html`
+
+```html
+<input type="radio" name="radio-11" class="radio" disabled checked="checked" />
+<input type="radio" name="radio-11" class="radio" disabled />
+```
+
+### Error color
+
+Source: `playground/components/radio/error-color.html`
+
+```html
+<input type="radio" name="radio-10" class="radio radio-error" checked="checked" />
+<input type="radio" name="radio-10" class="radio radio-error" />
+```
+
+### Info color
+
+Source: `playground/components/radio/info-color.html`
+
+```html
+<input type="radio" name="radio-9" class="radio radio-info" checked="checked" />
+<input type="radio" name="radio-9" class="radio radio-info" />
+```
+
+### Neutral color
+
+Source: `playground/components/radio/neutral-color.html`
+
+```html
+<input type="radio" name="radio-3" class="radio radio-neutral" checked="checked" />
+<input type="radio" name="radio-3" class="radio radio-neutral" />
+```
+
+### Primary color
+
+Source: `playground/components/radio/primary-color.html`
+
+```html
+<input type="radio" name="radio-4" class="radio radio-primary" checked="checked" />
+<input type="radio" name="radio-4" class="radio radio-primary" />
+```
+
+### Radio sizes
+
+Source: `playground/components/radio/radio-sizes.html`
+
+```html
+<input type="radio" name="radio-2" class="radio radio-xs" checked="checked" />
+<input type="radio" name="radio-2" class="radio radio-sm" checked="checked" />
+<input type="radio" name="radio-2" class="radio radio-md" checked="checked" />
+<input type="radio" name="radio-2" class="radio radio-lg" checked="checked" />
+<input type="radio" name="radio-2" class="radio radio-xl" checked="checked" />
+```
+
+### Radio with custom colors
+
+Source: `playground/components/radio/radio-with-custom-colors.html`
+
+```html
+<input
+  type="radio" name="radio-12" checked="checked"
+  class="radio bg-red-100 border-red-300 checked:bg-red-200 checked:text-red-600 checked:border-red-600" />
+<input
+  type="radio" name="radio-12" checked="checked"
+  class="radio bg-blue-100 border-blue-300 checked:bg-blue-200 checked:text-blue-600 checked:border-blue-600" />
+```
+
+### Secondary color
+
+Source: `playground/components/radio/secondary-color.html`
+
+```html
+<input type="radio" name="radio-5" class="radio radio-secondary" checked="checked" />
+<input type="radio" name="radio-5" class="radio radio-secondary" />
+```
+
+### Success color
+
+Source: `playground/components/radio/success-color.html`
+
+```html
+<input type="radio" name="radio-7" class="radio radio-success" checked="checked" />
+<input type="radio" name="radio-7" class="radio radio-success" />
+```
+
+### Warning color
+
+Source: `playground/components/radio/warning-color.html`
+
+```html
+<input type="radio" name="radio-8" class="radio radio-warning" checked="checked" />
+<input type="radio" name="radio-8" class="radio radio-warning" />
+```

package/skill/margaui/components/range.md

@@ -0,0 +1,134 @@
+# range
+
+_styled `<input type="range">` slider_
+
+## What it does
+
+Themed range slider.
+
+## When to use
+
+- Numeric ranges where exact precision is less important than feel.
+
+## Core classes
+
+`range`; color `range-primary|secondary|accent|info|success|warning|error|neutral`; size `range-xs|sm|md|lg|xl`.
+
+## Examples
+
+### Range
+
+Source: `playground/components/range/range.html`
+
+```html
+<input type="range" min="0" max="100" value="40" class="range" />
+```
+
+### Accent color
+
+Source: `playground/components/range/accent-color.html`
+
+```html
+<input type="range" min="0" max="100" value="40" class="range range-accent" />
+```
+
+### Error color
+
+Source: `playground/components/range/error-color.html`
+
+```html
+<input type="range" min="0" max="100" value="40" class="range range-error" />
+```
+
+### Info color
+
+Source: `playground/components/range/info-color.html`
+
+```html
+<input type="range" min="0" max="100" value="40" class="range range-info" />
+```
+
+### Neutral color
+
+Source: `playground/components/range/neutral-color.html`
+
+```html
+<input type="range" min="0" max="100" value="40" class="range range-neutral" />
+```
+
+### Primary color
+
+Source: `playground/components/range/primary-color.html`
+
+```html
+<input type="range" min="0" max="100" value="40" class="range range-primary" />
+```
+
+### Range with custom color and no fill
+
+Source: `playground/components/range/range-with-custom-color-and-no-fill.html`
+
+```html
+<input type="range" min="0" max="100" value="40" 
+  class="range text-blue-300 [--range-bg:orange] [--range-thumb:blue] [--range-fill:0]" />
+```
+
+### Secondary color
+
+Source: `playground/components/range/secondary-color.html`
+
+```html
+<input type="range" min="0" max="100" value="40" class="range range-secondary" />
+```
+
+### Sizes
+
+Source: `playground/components/range/sizes.html`
+
+```html
+<input type="range" min="0" max="100" value="30" class="range range-xs" />
+<input type="range" min="0" max="100" value="40" class="range range-sm" />
+<input type="range" min="0" max="100" value="50" class="range range-md" />
+<input type="range" min="0" max="100" value="60" class="range range-lg" />
+<input type="range" min="0" max="100" value="70" class="range range-xl" />
+```
+
+### Success color
+
+Source: `playground/components/range/success-color.html`
+
+```html
+<input type="range" min="0" max="100" value="40" class="range range-success" />
+```
+
+### Warning color
+
+Source: `playground/components/range/warning-color.html`
+
+```html
+<input type="range" min="0" max="100" value="40" class="range range-warning" />
+```
+
+### With steps and measure
+
+Source: `playground/components/range/with-steps-and-measure.html`
+
+```html
+<div class="w-full max-w-xs">
+  <input type="range" min="0" max="100" value="25" class="range" step="25" />
+  <div class="flex justify-between px-2.5 mt-2 text-xs">
+    <span>|</span>
+    <span>|</span>
+    <span>|</span>
+    <span>|</span>
+    <span>|</span>
+  </div>
+  <div class="flex justify-between px-2.5 mt-2 text-xs">
+    <span>1</span>
+    <span>2</span>
+    <span>3</span>
+    <span>4</span>
+    <span>5</span>
+  </div>
+</div>
+```