tutuca 0.11.2 → 0.12.0

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

@@ -0,0 +1,170 @@
+# 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

@@ -0,0 +1,225 @@
+# 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

@@ -0,0 +1,64 @@
+# 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>
+```