tutuca 0.11.2 → 0.12.0

package/skill/margaui/components/otp.md

@@ -0,0 +1,171 @@
+# otp
+
+_one-time-password digit input (2FA / verification codes)_
+
+## What it does
+
+A `<label class="otp">` wrapping N empty `<span>` boxes (one per digit) plus a single real `<input>`; the spans render as the visual digit boxes overlaying the input.
+
+## When to use
+
+- 2FA / passwordless-login verification code entry.
+- Number of `<span>` elements must match the input's `maxlength`/`pattern`.
+
+## Core classes
+
+`otp`; modifier `otp-joined`; size `otp-xs|sm|md|lg|xl`; color `otp-neutral|primary|secondary|accent|info|success|warning|error`.
+
+## Examples
+
+### Otp
+
+Source: `playground/components/otp/otp.html`
+
+```html
+<label class="otp">
+  <span></span>
+  <span></span>
+  <span></span>
+  <span></span>
+  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+</label>
+```
+
+### Otp joined
+
+Source: `playground/components/otp/otp-joined.html`
+
+```html
+<label class="otp otp-joined">
+  <span></span>
+  <span></span>
+  <span></span>
+  <span></span>
+  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+</label>
+```
+
+### Otp sizes
+
+Source: `playground/components/otp/otp-sizes.html`
+
+```html
+<div class="flex flex-col gap-4 items-center">
+  <label class="otp otp-xs">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+  <label class="otp otp-sm">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+  <label class="otp otp-md">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+  <label class="otp otp-lg">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+  <label class="otp otp-xl">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+</div>
+```
+
+### Otp with 6 digits
+
+Source: `playground/components/otp/otp-with-6-digits.html`
+
+```html
+<label class="otp">
+  <span></span>
+  <span></span>
+  <span></span>
+  <span></span>
+  <span></span>
+  <span></span>
+  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="6" pattern="[0-9]{6}" required />
+</label>
+```
+
+### Otp with colors
+
+Source: `playground/components/otp/otp-with-colors.html`
+
+```html
+<div class="flex flex-col gap-4 items-center">
+  <label class="otp otp-neutral">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+  <label class="otp otp-primary">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+  <label class="otp otp-secondary">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+  <label class="otp otp-accent">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+  <label class="otp otp-info">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+  <label class="otp otp-success">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+  <label class="otp otp-warning">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+  <label class="otp otp-error">
+    <span></span>
+    <span></span>
+    <span></span>
+    <span></span>
+    <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
+  </label>
+</div>
+```

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