tutuca 0.11.0 → 0.11.2

package/skill/margaui/components/range.md

@@ -1,134 +0,0 @@
-# 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`; orientation `range-vertical`.
-
-## 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>
-```

package/skill/margaui/components/rating.md

@@ -1,170 +0,0 @@
-# rating
-
-_star / heart rating (radio inputs + masks)_
-
-## What it does
-
-Star/heart rating built from masked radio inputs.
-
-## When to use
-
-- Product / content ratings.
-- For read-only display, set `disabled` on the inputs.
-
-## Core classes
-
-`rating`; size `rating-xs|sm|md|lg|xl`; modifier `rating-half`; child inputs use `mask mask-star|heart|…`.
-
-## Examples
-
-### Rating
-
-Source: `playground/components/rating/rating.html`
-
-```html
-<div class="rating">
-  <input type="radio" name="rating-1" class="mask mask-star" aria-label="1 star" />
-  <input type="radio" name="rating-1" class="mask mask-star" aria-label="2 star" checked="checked" />
-  <input type="radio" name="rating-1" class="mask mask-star" aria-label="3 star" />
-  <input type="radio" name="rating-1" class="mask mask-star" aria-label="4 star" />
-  <input type="radio" name="rating-1" class="mask mask-star" aria-label="5 star" />
-</div>
-```
-
-### Half stars
-
-Source: `playground/components/rating/half-stars.html`
-
-```html
-<div class="rating rating-lg rating-half">
-  <input type="radio" name="rating-11" class="rating-hidden" />
-  <input type="radio" name="rating-11" class="mask mask-star-2 mask-half-1 bg-green-500" aria-label="0.5 star" />
-  <input type="radio" name="rating-11" class="mask mask-star-2 mask-half-2 bg-green-500" aria-label="1 star" />
-  <input type="radio" name="rating-11" class="mask mask-star-2 mask-half-1 bg-green-500" aria-label="1.5 star" checked="checked" />
-  <input type="radio" name="rating-11" class="mask mask-star-2 mask-half-2 bg-green-500" aria-label="2 star" />
-  <input type="radio" name="rating-11" class="mask mask-star-2 mask-half-1 bg-green-500" aria-label="2.5 star" />
-  <input type="radio" name="rating-11" class="mask mask-star-2 mask-half-2 bg-green-500" aria-label="3 star" />
-  <input type="radio" name="rating-11" class="mask mask-star-2 mask-half-1 bg-green-500" aria-label="3.5 star" />
-  <input type="radio" name="rating-11" class="mask mask-star-2 mask-half-2 bg-green-500" aria-label="4 star" />
-  <input type="radio" name="rating-11" class="mask mask-star-2 mask-half-1 bg-green-500" aria-label="4.5 star" />
-  <input type="radio" name="rating-11" class="mask mask-star-2 mask-half-2 bg-green-500" aria-label="5 star" />
-</div>
-```
-
-### Mask heart with multiple colors
-
-Source: `playground/components/rating/mask-heart-with-multiple-colors.html`
-
-```html
-<div class="rating gap-1">
-  <input type="radio" name="rating-3" class="mask mask-heart bg-red-400" aria-label="1 star" />
-  <input type="radio" name="rating-3" class="mask mask-heart bg-orange-400" aria-label="2 star" checked="checked" />
-  <input type="radio" name="rating-3" class="mask mask-heart bg-yellow-400" aria-label="3 star" />
-  <input type="radio" name="rating-3" class="mask mask-heart bg-lime-400" aria-label="4 star" />
-  <input type="radio" name="rating-3" class="mask mask-heart bg-green-400" aria-label="5 star" />
-</div>
-```
-
-### Mask star 2 with green 500 color
-
-Source: `playground/components/rating/mask-star-2-with-green-500-color.html`
-
-```html
-<div class="rating">
-  <input type="radio" name="rating-4" class="mask mask-star-2 bg-green-500" aria-label="1 star" />
-  <input type="radio" name="rating-4" class="mask mask-star-2 bg-green-500" aria-label="2 star" checked="checked" />
-  <input type="radio" name="rating-4" class="mask mask-star-2 bg-green-500" aria-label="3 star" />
-  <input type="radio" name="rating-4" class="mask mask-star-2 bg-green-500" aria-label="4 star" />
-  <input type="radio" name="rating-4" class="mask mask-star-2 bg-green-500" aria-label="5 star" />
-</div>
-```
-
-### Mask star 2 with warning color
-
-Source: `playground/components/rating/mask-star-2-with-warning-color.html`
-
-```html
-<div class="rating">
-  <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" aria-label="1 star" />
-  <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
-  <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" aria-label="3 star" />
-  <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" aria-label="4 star" />
-  <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" aria-label="5 star" />
-</div>
-```
-
-### Read only rating
-
-Source: `playground/components/rating/read-only-rating.html`
-
-```html
-<div class="rating">
-  <div class="mask mask-star" aria-label="1 star"></div>
-  <div class="mask mask-star" aria-label="2 star"></div>
-  <div class="mask mask-star" aria-label="3 star" aria-current="true"></div>
-  <div class="mask mask-star" aria-label="4 star"></div>
-  <div class="mask mask-star" aria-label="5 star"></div>
-</div>
-```
-
-### Sizes
-
-Source: `playground/components/rating/sizes.html`
-
-```html
-<!-- xs -->
-<div class="rating rating-xs">
-  <input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" aria-label="1 star" />
-  <input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
-  <input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" aria-label="3 star" />
-  <input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" aria-label="4 star" />
-  <input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" aria-label="5 star" />
-</div>
-<!-- sm -->
-<div class="rating rating-sm">
-  <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" aria-label="1 star" />
-  <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
-  <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" aria-label="3 star" />
-  <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" aria-label="4 star" />
-  <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" aria-label="5 star" />
-</div>
-<!-- md -->
-<div class="rating rating-md">
-  <input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" aria-label="1 star" />
-  <input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
-  <input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" aria-label="3 star" />
-  <input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" aria-label="4 star" />
-  <input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" aria-label="5 star" />
-</div>
-<!-- lg -->
-<div class="rating rating-lg">
-  <input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" aria-label="1 star" />
-  <input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
-  <input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" aria-label="3 star" />
-  <input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" aria-label="4 star" />
-  <input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" aria-label="5 star" />
-</div>
-<!-- xl -->
-<div class="rating rating-xl">
-  <input type="radio" name="rating-9" class="mask mask-star-2 bg-orange-400" aria-label="1 star" />
-  <input type="radio" name="rating-9" class="mask mask-star-2 bg-orange-400" aria-label="2 star" checked="checked" />
-  <input type="radio" name="rating-9" class="mask mask-star-2 bg-orange-400" aria-label="3 star" />
-  <input type="radio" name="rating-9" class="mask mask-star-2 bg-orange-400" aria-label="4 star" />
-  <input type="radio" name="rating-9" class="mask mask-star-2 bg-orange-400" aria-label="5 star" />
-</div>
-```
-
-### With rating hidden
-
-Source: `playground/components/rating/with-rating-hidden.html`
-
-```html
-<div class="rating rating-lg">
-  <input type="radio" name="rating-10" class="rating-hidden" aria-label="clear" />
-  <input type="radio" name="rating-10" class="mask mask-star-2" aria-label="1 star" />
-  <input type="radio" name="rating-10" class="mask mask-star-2" aria-label="2 star" checked="checked" />
-  <input type="radio" name="rating-10" class="mask mask-star-2" aria-label="3 star" />
-  <input type="radio" name="rating-10" class="mask mask-star-2" aria-label="4 star" />
-  <input type="radio" name="rating-10" class="mask mask-star-2" aria-label="5 star" />
-</div>
-```

package/skill/margaui/components/select.md

@@ -1,225 +0,0 @@
-# select
-
-_styled `<select>`_
-
-## What it does
-
-Themed `<select>` dropdown.
-
-## When to use
-
-- Single-choice form fields with many options.
-- For visible single-choice (few options), use **radio**.
-
-## Core classes
-
-`select`; color `select-primary|secondary|accent|info|success|warning|error|neutral`; style `select-ghost`; size `select-xs|sm|md|lg|xl`.
-
-## Examples
-
-### Select
-
-Source: `playground/components/select/select.html`
-
-```html
-<select class="select">
-  <option disabled selected>Pick a color</option>
-  <option>Crimson</option>
-  <option>Amber</option>
-  <option>Velvet</option>
-</select>
-```
-
-### Accent color
-
-Source: `playground/components/select/accent-color.html`
-
-```html
-<select class="select select-accent">
-  <option selected disabled>Color scheme</option>
-  <option>Light mode</option>
-  <option>Dark mode</option>
-  <option>System</option>
-</select>
-```
-
-### Disabled
-
-Source: `playground/components/select/disabled.html`
-
-```html
-<select class="select" disabled>
-  <option>You can't touch this</option>
-</select>
-```
-
-### Error color
-
-Source: `playground/components/select/error-color.html`
-
-```html
-<select class="select select-error">
-  <option disabled selected>Pick an AI Model</option>
-  <option>GPT-4</option>
-  <option>Claude</option>
-  <option>Llama</option>
-</select>
-```
-
-### Ghost no background
-
-Source: `playground/components/select/ghost-no-background.html`
-
-```html
-<select class="select select-ghost">
-  <option disabled selected>Pick a font</option>
-  <option>Inter</option>
-  <option>Poppins</option>
-  <option>Raleway</option>
-</select>
-```
-
-### Info color
-
-Source: `playground/components/select/info-color.html`
-
-```html
-<select class="select select-info">
-  <option disabled selected>Pick a Framework</option>
-  <option>React</option>
-  <option>Vue</option>
-  <option>Angular</option>
-</select>
-```
-
-### Neutral color
-
-Source: `playground/components/select/neutral-color.html`
-
-```html
-<select class="select select-neutral">
-  <option disabled selected>Server location</option>
-  <option>North America</option>
-  <option>EU west</option>
-  <option>South East Asia</option>
-</select>
-```
-
-### Primary color
-
-Source: `playground/components/select/primary-color.html`
-
-```html
-<select class="select select-primary">
-  <option disabled selected>Pick a text editor</option>
-  <option>VScode</option>
-  <option>VScode fork</option>
-  <option>Another VScode fork</option>
-</select>
-```
-
-### Secondary color
-
-Source: `playground/components/select/secondary-color.html`
-
-```html
-<select class="select select-secondary">
-  <option disabled selected>Pick a language</option>
-  <option>Zig</option>
-  <option>Go</option>
-  <option>Rust</option>
-</select>
-```
-
-### Sizes
-
-Source: `playground/components/select/sizes.html`
-
-```html
-<select class="select select-xs">
-  <option disabled selected>Xsmall</option>
-  <option>Xsmall Apple</option>
-  <option>Xsmall Orange</option>
-  <option>Xsmall Tomato</option>
-</select>
-<select class="select select-sm">
-  <option disabled selected>Small</option>
-  <option>Small Apple</option>
-  <option>Small Orange</option>
-  <option>Small Tomato</option>
-</select>
-<select class="select select-md">
-  <option disabled selected>Medium</option>
-  <option>Medium Apple</option>
-  <option>Medium Orange</option>
-  <option>Medium Tomato</option>
-</select>
-<select class="select select-lg">
-  <option disabled selected>Large</option>
-  <option>Large Apple</option>
-  <option>Large Orange</option>
-  <option>Large Tomato</option>
-</select>
-<select class="select select-xl">
-  <option disabled selected>Xlarge</option>
-  <option>Xlarge Apple</option>
-  <option>Xlarge Orange</option>
-  <option>Xlarge Tomato</option>
-</select>
-```
-
-### Success color
-
-Source: `playground/components/select/success-color.html`
-
-```html
-<select class="select select-success">
-  <option disabled selected>Pick a Runtime</option>
-  <option>npm</option>
-  <option>Bun</option>
-  <option>yarn</option>
-</select>
-```
-
-### Using os native style for the options dropdown
-
-Source: `playground/components/select/using-os-native-style-for-the-options-dropdown.html`
-
-```html
-<select class="select appearance-none">
-  <option disabled selected>Pick a color</option>
-  <option>Crimson</option>
-  <option>Amber</option>
-  <option>Velvet</option>
-</select>
-```
-
-### Warning color
-
-Source: `playground/components/select/warning-color.html`
-
-```html
-<select class="select select-warning">
-  <option disabled selected>Pick an OS</option>
-  <option>Windows</option>
-  <option>MacOS</option>
-  <option>Linux</option>
-</select>
-```
-
-### With fieldset and labels
-
-Source: `playground/components/select/with-fieldset-and-labels.html`
-
-```html
-<fieldset class="fieldset">
-  <legend class="fieldset-legend">Browsers</legend>
-  <select class="select">
-    <option disabled selected>Pick a browser</option>
-    <option>Chrome</option>
-    <option>FireFox</option>
-    <option>Safari</option>
-  </select>
-  <span class="label">Optional</span>
-</fieldset>
-```

package/skill/margaui/components/skeleton.md

@@ -1,64 +0,0 @@
-# skeleton
-
-_shimmering placeholder for loading content_
-
-## What it does
-
-Animated content-shaped placeholder for loading states.
-
-## When to use
-
-- Loading states where you want the layout to pre-fill (lists, cards).
-- For abstract spinners, use **loading**.
-
-## Core classes
-
-`skeleton`.
-
-## Examples
-
-### Skeleton
-
-Source: `playground/components/skeleton/skeleton.html`
-
-```html
-<div class="skeleton h-32 w-32"></div>
-```
-
-### Skeleton —  circle with content
-
-Source: `playground/components/skeleton/skeleton---circle-with-content.html`
-
-```html
-<div class="flex w-52 flex-col gap-4">
-  <div class="flex items-center gap-4">
-    <div class="skeleton h-16 w-16 shrink-0 rounded-full"></div>
-    <div class="flex flex-col gap-4">
-      <div class="skeleton h-4 w-20"></div>
-      <div class="skeleton h-4 w-28"></div>
-    </div>
-  </div>
-  <div class="skeleton h-32 w-full"></div>
-</div>
-```
-
-### Skeleton —  rectangle with content
-
-Source: `playground/components/skeleton/skeleton---rectangle-with-content.html`
-
-```html
-<div class="flex w-52 flex-col gap-4">
-  <div class="skeleton h-32 w-full"></div>
-  <div class="skeleton h-4 w-28"></div>
-  <div class="skeleton h-4 w-full"></div>
-  <div class="skeleton h-4 w-full"></div>
-</div>
-```
-
-### Skeleton text —  animated gradient text
-
-Source: `playground/components/skeleton/skeleton-text---animated-gradient-text.html`
-
-```html
-<span class="skeleton skeleton-text">AI is thinking harder...</span>
-```