tutuca 0.9.39 → 0.9.41

package/skill/margaui/components/stat.md

@@ -0,0 +1,254 @@
+# stat
+
+_KPI / metric tile (title + value + desc)_
+
+## What it does
+
+Metric/KPI tile with title, value, description, and optional icon/figure/actions.
+
+## When to use
+
+- Dashboards, summary headers.
+
+## Core classes
+
+`stats` wrapper; child `stat`; inner `stat-title`, `stat-value`, `stat-desc`, `stat-figure`, `stat-actions`.
+
+## Examples
+
+### Stat
+
+Source: `playground/components/stat/stat.html`
+
+```html
+<div class="stats shadow">
+  <div class="stat">
+    <div class="stat-figure text-secondary">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        class="inline-block h-8 w-8 stroke-current"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+        ></path>
+      </svg>
+    </div>
+    <div class="stat-title">Downloads</div>
+    <div class="stat-value">31K</div>
+    <div class="stat-desc">Jan 1st - Feb 1st</div>
+  </div>
+
+  <div class="stat">
+    <div class="stat-figure text-secondary">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        class="inline-block h-8 w-8 stroke-current"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
+        ></path>
+      </svg>
+    </div>
+    <div class="stat-title">New Users</div>
+    <div class="stat-value">4,200</div>
+    <div class="stat-desc">↗︎ 400 (22%)</div>
+  </div>
+
+  <div class="stat">
+    <div class="stat-figure text-secondary">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        class="inline-block h-8 w-8 stroke-current"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
+        ></path>
+      </svg>
+    </div>
+    <div class="stat-title">New Registers</div>
+    <div class="stat-value">1,200</div>
+    <div class="stat-desc">↘︎ 90 (14%)</div>
+  </div>
+</div>
+```
+
+### Centered items
+
+Source: `playground/components/stat/centered-items.html`
+
+```html
+<div class="stats shadow">
+  <div class="stat place-items-center">
+    <div class="stat-title">Downloads</div>
+    <div class="stat-value">31K</div>
+    <div class="stat-desc">From January 1st to February 1st</div>
+  </div>
+
+  <div class="stat place-items-center">
+    <div class="stat-title">Users</div>
+    <div class="stat-value text-secondary">4,200</div>
+    <div class="stat-desc text-secondary">↗︎ 40 (2%)</div>
+  </div>
+
+  <div class="stat place-items-center">
+    <div class="stat-title">New Registers</div>
+    <div class="stat-value">1,200</div>
+    <div class="stat-desc">↘︎ 90 (14%)</div>
+  </div>
+</div>
+```
+
+### Responsive vertical on small screen horizontal on large screen
+
+Source: `playground/components/stat/responsive-vertical-on-small-screen-horizontal-on-large-screen.html`
+
+```html
+<div class="stats stats-vertical lg:stats-horizontal shadow">
+  <div class="stat">
+    <div class="stat-title">Downloads</div>
+    <div class="stat-value">31K</div>
+    <div class="stat-desc">Jan 1st - Feb 1st</div>
+  </div>
+
+  <div class="stat">
+    <div class="stat-title">New Users</div>
+    <div class="stat-value">4,200</div>
+    <div class="stat-desc">↗︎ 400 (22%)</div>
+  </div>
+
+  <div class="stat">
+    <div class="stat-title">New Registers</div>
+    <div class="stat-value">1,200</div>
+    <div class="stat-desc">↘︎ 90 (14%)</div>
+  </div>
+</div>
+```
+
+### Stat with icons or image
+
+Source: `playground/components/stat/stat-with-icons-or-image.html`
+
+```html
+<div class="stats shadow">
+  <div class="stat">
+    <div class="stat-figure text-primary">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        class="inline-block h-8 w-8 stroke-current"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+        ></path>
+      </svg>
+    </div>
+    <div class="stat-title">Total Likes</div>
+    <div class="stat-value text-primary">25.6K</div>
+    <div class="stat-desc">21% more than last month</div>
+  </div>
+
+  <div class="stat">
+    <div class="stat-figure text-secondary">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        class="inline-block h-8 w-8 stroke-current"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M13 10V3L4 14h7v7l9-11h-7z"
+        ></path>
+      </svg>
+    </div>
+    <div class="stat-title">Page Views</div>
+    <div class="stat-value text-secondary">2.6M</div>
+    <div class="stat-desc">21% more than last month</div>
+  </div>
+
+  <div class="stat">
+    <div class="stat-figure text-secondary">
+      <div class="avatar avatar-online">
+        <div class="w-16 rounded-full">
+          <img src="https://img.daisyui.com/images/profile/demo/anakeen@192.webp" />
+        </div>
+      </div>
+    </div>
+    <div class="stat-value">86%</div>
+    <div class="stat-title">Tasks done</div>
+    <div class="stat-desc text-secondary">31 tasks remaining</div>
+  </div>
+</div>
+```
+
+### Vertical
+
+Source: `playground/components/stat/vertical.html`
+
+```html
+<div class="stats stats-vertical shadow">
+  <div class="stat">
+    <div class="stat-title">Downloads</div>
+    <div class="stat-value">31K</div>
+    <div class="stat-desc">Jan 1st - Feb 1st</div>
+  </div>
+
+  <div class="stat">
+    <div class="stat-title">New Users</div>
+    <div class="stat-value">4,200</div>
+    <div class="stat-desc">↗︎ 400 (22%)</div>
+  </div>
+
+  <div class="stat">
+    <div class="stat-title">New Registers</div>
+    <div class="stat-value">1,200</div>
+    <div class="stat-desc">↘︎ 90 (14%)</div>
+  </div>
+</div>
+```
+
+### With custom colors and button
+
+Source: `playground/components/stat/with-custom-colors-and-button.html`
+
+```html
+<div class="stats bg-base-100 border-base-300 border">
+  <div class="stat">
+    <div class="stat-title">Account balance</div>
+    <div class="stat-value">$89,400</div>
+    <div class="stat-actions">
+      <button class="btn btn-xs btn-success">Add funds</button>
+    </div>
+  </div>
+
+  <div class="stat">
+    <div class="stat-title">Current balance</div>
+    <div class="stat-value">$89,400</div>
+    <div class="stat-actions">
+      <button class="btn btn-xs">Withdrawal</button>
+      <button class="btn btn-xs">Deposit</button>
+    </div>
+  </div>
+</div>
+```

package/skill/margaui/components/status.md

@@ -0,0 +1,73 @@
+# status
+
+_small colored status dot_
+
+## What it does
+
+Small colored dot for status indication (online, busy, etc.), with optional bounce/ping animation.
+
+## When to use
+
+- Presence dots, system-health indicators.
+- For text + dot, combine with **badge** or **indicator**.
+
+## Core classes
+
+`status`; color `status-primary|secondary|accent|info|success|warning|error|neutral`; size `status-xs|sm|md|lg|xl`.
+
+## Examples
+
+### Status
+
+Source: `playground/components/status/status.html`
+
+```html
+<span class="status"></span>
+```
+
+### Status sizes
+
+Source: `playground/components/status/status-sizes.html`
+
+```html
+<div aria-label="status" class="status status-xs"></div>
+<div aria-label="status" class="status status-sm"></div>
+<div aria-label="status" class="status status-md"></div>
+<div aria-label="status" class="status status-lg"></div>
+<div aria-label="status" class="status status-xl"></div>
+```
+
+### Status with bounce animation
+
+Source: `playground/components/status/status-with-bounce-animation.html`
+
+```html
+<div class="status status-info animate-bounce"></div> Unread messages
+```
+
+### Status with colors
+
+Source: `playground/components/status/status-with-colors.html`
+
+```html
+<div aria-label="status" class="status status-primary"></div>
+<div aria-label="status" class="status status-secondary"></div>
+<div aria-label="status" class="status status-accent"></div>
+<div aria-label="status" class="status status-neutral"></div>
+
+<div aria-label="info" class="status status-info"></div>
+<div aria-label="success" class="status status-success"></div>
+<div aria-label="warning" class="status status-warning"></div>
+<div aria-label="error" class="status status-error"></div>
+```
+
+### Status with ping animation
+
+Source: `playground/components/status/status-with-ping-animation.html`
+
+```html
+<div class="inline-grid *:[grid-area:1/1]">
+  <div class="status status-error animate-ping"></div>
+  <div class="status status-error"></div>
+</div> Server is down
+```

package/skill/margaui/components/steps.md

@@ -0,0 +1,138 @@
+# steps
+
+_multi-step progress indicator_
+
+## What it does
+
+Multi-step progress indicator (horizontal or vertical).
+
+## When to use
+
+- Wizards, checkout flows, onboarding.
+
+## Core classes
+
+`steps`; orientation `steps-horizontal|vertical`; child `step`; state `step-primary|secondary|accent|info|success|warning|error|neutral`.
+
+## Examples
+
+### Custom colors
+
+Source: `playground/components/steps/custom-colors.html`
+
+```html
+<ul class="steps">
+  <li class="step step-info">Fly to moon</li>
+  <li class="step step-info">Shrink the moon</li>
+  <li class="step step-info">Grab the moon</li>
+  <li class="step step-error" data-content="?">Sit on toilet</li>
+</ul>
+```
+
+### Horizontal
+
+Source: `playground/components/steps/horizontal.html`
+
+```html
+<ul class="steps">
+  <li class="step step-primary">Register</li>
+  <li class="step step-primary">Choose plan</li>
+  <li class="step">Purchase</li>
+  <li class="step">Receive Product</li>
+</ul>
+```
+
+### Responsive vertical on small screen horizontal on large screen
+
+Source: `playground/components/steps/responsive-vertical-on-small-screen-horizontal-on-large-screen.html`
+
+```html
+<ul class="steps steps-vertical lg:steps-horizontal">
+  <li class="step step-primary">Register</li>
+  <li class="step step-primary">Choose plan</li>
+  <li class="step">Purchase</li>
+  <li class="step">Receive Product</li>
+</ul>
+```
+
+### Vertical
+
+Source: `playground/components/steps/vertical.html`
+
+```html
+<ul class="steps steps-vertical">
+  <li class="step step-primary">Register</li>
+  <li class="step step-primary">Choose plan</li>
+  <li class="step">Purchase</li>
+  <li class="step">Receive Product</li>
+</ul>
+```
+
+### With custom content in step icon
+
+Source: `playground/components/steps/with-custom-content-in-step-icon.html`
+
+```html
+<ul class="steps">
+  <li class="step step-neutral">
+    <span class="step-icon">😕</span>Step 1
+  </li>
+  <li class="step step-neutral">
+    <span class="step-icon">😃</span>Step 2
+  </li>
+  <li class="step">
+    <span class="step-icon">😍</span>Step 3
+  </li>
+</ul>
+```
+
+### With data content
+
+Source: `playground/components/steps/with-data-content.html`
+
+```html
+<ul class="steps">
+  <li data-content="?" class="step step-neutral">Step 1</li>
+  <li data-content="!" class="step step-neutral">Step 2</li>
+  <li data-content="✓" class="step step-neutral">Step 3</li>
+  <li data-content="✕" class="step step-neutral">Step 4</li>
+  <li data-content="★" class="step step-neutral">Step 5</li>
+  <li data-content="" class="step step-neutral">Step 6</li>
+  <li data-content="●" class="step step-neutral">Step 7</li>
+</ul>
+```
+
+### With scrollable wrapper
+
+Source: `playground/components/steps/with-scrollable-wrapper.html`
+
+```html
+<div class="overflow-x-auto">
+  <ul class="steps">
+    <li class="step">start</li>
+    <li class="step step-secondary">2</li>
+    <li class="step step-secondary">3</li>
+    <li class="step step-secondary">4</li>
+    <li class="step">5</li>
+    <li class="step step-accent">6</li>
+    <li class="step step-accent">7</li>
+    <li class="step">8</li>
+    <li class="step step-error">9</li>
+    <li class="step step-error">10</li>
+    <li class="step">11</li>
+    <li class="step">12</li>
+    <li class="step step-warning">13</li>
+    <li class="step step-warning">14</li>
+    <li class="step">15</li>
+    <li class="step step-neutral">16</li>
+    <li class="step step-neutral">17</li>
+    <li class="step step-neutral">18</li>
+    <li class="step step-neutral">19</li>
+    <li class="step step-neutral">20</li>
+    <li class="step step-neutral">21</li>
+    <li class="step step-neutral">22</li>
+    <li class="step step-neutral">23</li>
+    <li class="step step-neutral">end</li>
+  </ul>
+</div>
+```

package/skill/margaui/components/swap.md

@@ -0,0 +1,152 @@
+# swap
+
+_toggle between two children (icon swap, hamburger)_
+
+## What it does
+
+Toggle between two child elements driven by a checkbox or class.
+
+## When to use
+
+- Theme toggles, hamburger ↔ close icons, play ↔ pause.
+
+## Core classes
+
+`swap`; effect `swap-rotate|flip|active`; inner `swap-on`, `swap-off`.
+
+## Examples
+
+### Activate using class name instead of checkbox
+
+Source: `playground/components/swap/activate-using-class-name-instead-of-checkbox.html`
+
+```html
+<label class="swap text-6xl">
+  <div class="swap-on">🥵</div>
+  <div class="swap-off">🥶</div>
+</label>
+<label class="swap swap-active text-6xl">
+  <div class="swap-on">🥳</div>
+  <div class="swap-off">😭</div>
+</label>
+```
+
+### Hamburger button
+
+Source: `playground/components/swap/hamburger-button.html`
+
+```html
+<label class="btn btn-circle swap swap-rotate">
+  <!-- this hidden checkbox controls the state -->
+  <input type="checkbox" />
+
+  <!-- hamburger icon -->
+  <svg
+    class="swap-off fill-current"
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    viewBox="0 0 512 512">
+    <path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
+  </svg>
+
+  <!-- close icon -->
+  <svg
+    class="swap-on fill-current"
+    xmlns="http://www.w3.org/2000/svg"
+    width="32"
+    height="32"
+    viewBox="0 0 512 512">
+    <polygon
+      points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49" />
+  </svg>
+</label>
+```
+
+### Swap icons with flip effect
+
+Source: `playground/components/swap/swap-icons-with-flip-effect.html`
+
+```html
+<label class="swap swap-flip text-9xl">
+  <!-- this hidden checkbox controls the state -->
+  <input type="checkbox" />
+
+  <div class="swap-on">😈</div>
+  <div class="swap-off">😇</div>
+</label>
+```
+
+### Swap icons with rotate effect
+
+Source: `playground/components/swap/swap-icons-with-rotate-effect.html`
+
+```html
+<label class="swap swap-rotate">
+  <!-- this hidden checkbox controls the state -->
+  <input type="checkbox" />
+
+  <!-- sun icon -->
+  <svg
+    class="swap-on h-10 w-10 fill-current"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24">
+    <path
+      d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
+  </svg>
+
+  <!-- moon icon -->
+  <svg
+    class="swap-off h-10 w-10 fill-current"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24">
+    <path
+      d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
+  </svg>
+</label>
+```
+
+### Swap text
+
+Source: `playground/components/swap/swap-text.html`
+
+```html
+<label class="swap">
+  <input type="checkbox" />
+  <div class="swap-on">ON</div>
+  <div class="swap-off">OFF</div>
+</label>
+```
+
+### Swap volume icons
+
+Source: `playground/components/swap/swap-volume-icons.html`
+
+```html
+<label class="swap">
+  <!-- this hidden checkbox controls the state -->
+  <input type="checkbox" />
+
+  <!-- volume on icon -->
+  <svg
+    class="swap-on fill-current"
+    xmlns="http://www.w3.org/2000/svg"
+    width="48"
+    height="48"
+    viewBox="0 0 24 24">
+    <path
+      d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z" />
+  </svg>
+
+  <!-- volume off icon -->
+  <svg
+    class="swap-off fill-current"
+    xmlns="http://www.w3.org/2000/svg"
+    width="48"
+    height="48"
+    viewBox="0 0 24 24">
+    <path
+      d="M3,9H7L12,4V20L7,15H3V9M16.59,12L14,9.41L15.41,8L18,10.59L20.59,8L22,9.41L19.41,12L22,14.59L20.59,16L18,13.41L15.41,16L14,14.59L16.59,12Z" />
+  </svg>
+</label>
+```