tutuca 0.11.0 → 0.11.2

package/skill/margaui/components/stack.md

@@ -1,142 +0,0 @@
-# stack
-
-_stack children (Z-axis)_
-
-## What it does
-
-Stacks children on top of each other (Z-axis), with optional offset/spread for card-stack effects.
-
-## When to use
-
-- Stacked-card visual effects, layered images.
-
-## Core classes
-
-`stack`; modifiers `stack-top|bottom|start|end` and shadow modifiers.
-
-## Examples
-
-### 3 divs in a stack
-
-Source: `playground/components/stack/3-divs-in-a-stack.html`
-
-```html
-<div class="stack h-20 w-32">
-  <div class="bg-primary text-primary-content grid place-content-center rounded-box">1</div>
-  <div class="bg-accent text-accent-content grid place-content-center rounded-box">2</div>
-  <div class="bg-secondary text-secondary-content grid place-content-center rounded-box">
-    3
-  </div>
-</div>
-```
-
-### Stacked cards end direction
-
-Source: `playground/components/stack/stacked-cards-end-direction.html`
-
-```html
-<div class="stack stack-end size-28">
-  <div class="border-base-content card bg-base-100 border text-center">
-    <div class="card-body">A</div>
-  </div>
-  <div class="border-base-content card bg-base-100 border text-center">
-    <div class="card-body">B</div>
-  </div>
-  <div class="border-base-content card bg-base-100 border text-center">
-    <div class="card-body">C</div>
-  </div>
-</div>
-```
-
-### Stacked cards start direction
-
-Source: `playground/components/stack/stacked-cards-start-direction.html`
-
-```html
-<div class="stack stack-start size-28">
-  <div class="border-base-content card bg-base-100 border text-center">
-    <div class="card-body">A</div>
-  </div>
-  <div class="border-base-content card bg-base-100 border text-center">
-    <div class="card-body">B</div>
-  </div>
-  <div class="border-base-content card bg-base-100 border text-center">
-    <div class="card-body">C</div>
-  </div>
-</div>
-```
-
-### Stacked cards top direction
-
-Source: `playground/components/stack/stacked-cards-top-direction.html`
-
-```html
-<div class="stack stack-top size-28">
-  <div class="border-base-content card bg-base-100 border text-center">
-    <div class="card-body">A</div>
-  </div>
-  <div class="border-base-content card bg-base-100 border text-center">
-    <div class="card-body">B</div>
-  </div>
-  <div class="border-base-content card bg-base-100 border text-center">
-    <div class="card-body">C</div>
-  </div>
-</div>
-```
-
-### Stacked cards with shadow
-
-Source: `playground/components/stack/stacked-cards-with-shadow.html`
-
-```html
-<div class="stack">
-  <div class="card bg-base-200 text-center shadow-md">
-    <div class="card-body">A</div>
-  </div>
-  <div class="card bg-base-200 text-center shadow">
-    <div class="card-body">B</div>
-  </div>
-  <div class="card bg-base-200 text-center shadow-sm">
-    <div class="card-body">C</div>
-  </div>
-</div>
-```
-
-### Stacked cards
-
-Source: `playground/components/stack/stacked-cards.html`
-
-```html
-<div class="stack">
-  <div class="card shadow-md bg-base-100">
-    <div class="card-body">
-      <h2 class="card-title">Notification 1</h2>
-      <p>You have 3 unread messages. Tap here to see.</p>
-    </div>
-  </div>
-  <div class="card shadow-md bg-base-100">
-    <div class="card-body">
-      <h2 class="card-title">Notification 2</h2>
-      <p>You have 3 unread messages. Tap here to see.</p>
-    </div>
-  </div>
-  <div class="card shadow-md bg-base-100">
-    <div class="card-body">
-      <h2 class="card-title">Notification 3</h2>
-      <p>You have 3 unread messages. Tap here to see.</p>
-    </div>
-  </div>
-</div>
-```
-
-### Stacked images
-
-Source: `playground/components/stack/stacked-images.html`
-
-```html
-<div class="stack w-48">
-  <img src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp" class="rounded-box" />
-  <img src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" class="rounded-box" />
-  <img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" class="rounded-box" />
-</div>
-```

package/skill/margaui/components/stat.md

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

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

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