tutuca 0.11.0 → 0.11.2

package/skill/margaui/components/card.md

@@ -1,373 +0,0 @@
-# card
-
-_container with figure, body, title, actions_
-
-## What it does
-
-Self-contained content card with optional figure (image), body, title, and actions row.
-
-## When to use
-
-- Product tiles, summary panels, pricing tiles, blog post previews.
-- For a thin labelled chip, use **badge** instead.
-
-## Examples
-
-### Card
-
-Source: `playground/components/card/card.html`
-
-```html
-<div class="card bg-base-100 w-96 shadow-sm">
-  <figure>
-    <img
-      src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
-      alt="Shoes" />
-  </figure>
-  <div class="card-body">
-    <h2 class="card-title">Card Title</h2>
-    <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
-    <div class="card-actions justify-end">
-      <button class="btn btn-primary">Buy Now</button>
-    </div>
-  </div>
-</div>
-```
-
-### Card sizes
-
-Source: `playground/components/card/card-sizes.html`
-
-```html
-<div class="card w-96 bg-base-100 card-xs shadow-sm">
-  <div class="card-body">
-    <h2 class="card-title">Xsmall Card</h2>
-    <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
-    <div class="justify-end card-actions">
-      <button class="btn btn-primary">Buy Now</button>
-    </div>
-  </div>
-</div>
-
-<div class="card w-96 bg-base-100 card-sm shadow-sm">
-  <div class="card-body">
-    <h2 class="card-title">Small Card</h2>
-    <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
-    <div class="justify-end card-actions">
-      <button class="btn btn-primary">Buy Now</button>
-    </div>
-  </div>
-</div>
-
-<div class="card w-96 bg-base-100 card-md shadow-sm">
-  <div class="card-body">
-    <h2 class="card-title">Medium Card</h2>
-    <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
-    <div class="justify-end card-actions">
-      <button class="btn btn-primary">Buy Now</button>
-    </div>
-  </div>
-</div>
-
-<div class="card w-96 bg-base-100 card-lg shadow-sm">
-  <div class="card-body">
-    <h2 class="card-title">Large Card</h2>
-    <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
-    <div class="justify-end card-actions">
-      <button class="btn btn-primary">Buy Now</button>
-    </div>
-  </div>
-</div>
-
-<div class="card w-96 bg-base-100 card-xl shadow-sm">
-  <div class="card-body">
-    <h2 class="card-title">Xlarge Card</h2>
-    <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
-    <div class="justify-end card-actions">
-      <button class="btn btn-primary">Buy Now</button>
-    </div>
-  </div>
-</div>
-```
-
-### Card with a card border
-
-Source: `playground/components/card/card-with-a-card-border.html`
-
-```html
-<div class="card card-border bg-base-100 w-96">
-  <div class="card-body">
-    <h2 class="card-title">Card Title</h2>
-    <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
-    <div class="card-actions justify-end">
-      <button class="btn btn-primary">Buy Now</button>
-    </div>
-  </div>
-</div>
-```
-
-### Card with a dash border
-
-Source: `playground/components/card/card-with-a-dash-border.html`
-
-```html
-<div class="card card-dash bg-base-100 w-96">
-  <div class="card-body">
-    <h2 class="card-title">Card Title</h2>
-    <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
-    <div class="card-actions justify-end">
-      <button class="btn btn-primary">Buy Now</button>
-    </div>
-  </div>
-</div>
-```
-
-### Card with action on top
-
-Source: `playground/components/card/card-with-action-on-top.html`
-
-```html
-<div class="card bg-base-100 w-96 shadow-sm">
-  <div class="card-body">
-    <div class="card-actions justify-end">
-      <button class="btn btn-square btn-sm">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-6 w-6"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor">
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M6 18L18 6M6 6l12 12" />
-        </svg>
-      </button>
-    </div>
-    <p>We are using cookies for no reason.</p>
-  </div>
-</div>
-```
-
-### Card with badge
-
-Source: `playground/components/card/card-with-badge.html`
-
-```html
-<div class="card bg-base-100 w-96 shadow-sm">
-  <figure>
-    <img
-      src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
-      alt="Shoes" />
-  </figure>
-  <div class="card-body">
-    <h2 class="card-title">
-      Card Title
-      <div class="badge badge-secondary">NEW</div>
-    </h2>
-    <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
-    <div class="card-actions justify-end">
-      <div class="badge badge-outline">Fashion</div>
-      <div class="badge badge-outline">Products</div>
-    </div>
-  </div>
-</div>
-```
-
-### Card with bottom image
-
-Source: `playground/components/card/card-with-bottom-image.html`
-
-```html
-<div class="card bg-base-100 w-96 shadow-sm">
-  <div class="card-body">
-    <h2 class="card-title">Card Title</h2>
-    <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
-  </div>
-  <figure>
-    <img
-      src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
-      alt="Shoes" />
-  </figure>
-</div>
-```
-
-### Card with centered content and paddings
-
-Source: `playground/components/card/card-with-centered-content-and-paddings.html`
-
-```html
-<div class="card bg-base-100 w-96 shadow-sm">
-  <figure class="px-10 pt-10">
-    <img
-      src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
-      alt="Shoes"
-      class="rounded-xl" />
-  </figure>
-  <div class="card-body items-center text-center">
-    <h2 class="card-title">Card Title</h2>
-    <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
-    <div class="card-actions">
-      <button class="btn btn-primary">Buy Now</button>
-    </div>
-  </div>
-</div>
-```
-
-### Card with custom color
-
-Source: `playground/components/card/card-with-custom-color.html`
-
-```html
-<div class="card bg-primary text-primary-content w-96">
-  <div class="card-body">
-    <h2 class="card-title">Card title!</h2>
-    <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
-    <div class="card-actions justify-end">
-      <button class="btn">Buy Now</button>
-    </div>
-  </div>
-</div>
-```
-
-### Card with image on side
-
-Source: `playground/components/card/card-with-image-on-side.html`
-
-```html
-<div class="card card-side bg-base-100 shadow-sm">
-  <figure>
-    <img
-      src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp"
-      alt="Movie" />
-  </figure>
-  <div class="card-body">
-    <h2 class="card-title">New movie is released!</h2>
-    <p>Click the button to watch on Jetflix app.</p>
-    <div class="card-actions justify-end">
-      <button class="btn btn-primary">Watch</button>
-    </div>
-  </div>
-</div>
-```
-
-### Card with image overlay
-
-Source: `playground/components/card/card-with-image-overlay.html`
-
-```html
-<div class="card bg-base-100 image-full w-96 shadow-sm">
-  <figure>
-    <img
-      src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
-      alt="Shoes" />
-  </figure>
-  <div class="card-body">
-    <h2 class="card-title">Card Title</h2>
-    <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
-    <div class="card-actions justify-end">
-      <button class="btn btn-primary">Buy Now</button>
-    </div>
-  </div>
-</div>
-```
-
-### Card with no image
-
-Source: `playground/components/card/card-with-no-image.html`
-
-```html
-<div class="card bg-base-100 w-96 shadow-sm">
-  <div class="card-body">
-    <h2 class="card-title">Card title!</h2>
-    <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
-    <div class="card-actions justify-end">
-      <button class="btn btn-primary">Buy Now</button>
-    </div>
-  </div>
-</div>
-```
-
-### Centered card with neutral color
-
-Source: `playground/components/card/centered-card-with-neutral-color.html`
-
-```html
-<div class="card bg-neutral text-neutral-content w-96">
-  <div class="card-body items-center text-center">
-    <h2 class="card-title">Cookies!</h2>
-    <p>We are using cookies for no reason.</p>
-    <div class="card-actions justify-end">
-      <button class="btn btn-primary">Accept</button>
-      <button class="btn btn-ghost">Deny</button>
-    </div>
-  </div>
-</div>
-```
-
-### Pricing card
-
-Source: `playground/components/card/pricing-card.html`
-
-```html
-<div class="card w-96 bg-base-100 shadow-sm">
-  <div class="card-body">
-    <span class="badge badge-xs badge-warning">Most Popular</span>
-    <div class="flex justify-between">
-      <h2 class="text-3xl font-bold">Premium</h2>
-      <span class="text-xl">$29/mo</span>
-    </div>
-    <ul class="mt-6 flex flex-col gap-2 text-xs">
-      <li>
-        <svg xmlns="http://www.w3.org/2000/svg" class="size-4 me-2 inline-block text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
-        <span>High-resolution image generation</span>
-      </li>
-      <li>
-        <svg xmlns="http://www.w3.org/2000/svg" class="size-4 me-2 inline-block text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
-        <span>Customizable style templates</span>
-      </li>
-      <li>
-        <svg xmlns="http://www.w3.org/2000/svg" class="size-4 me-2 inline-block text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
-        <span>Batch processing capabilities</span>
-      </li>
-      <li>
-        <svg xmlns="http://www.w3.org/2000/svg" class="size-4 me-2 inline-block text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
-        <span>AI-driven image enhancements</span>
-      </li>
-      <li class="opacity-50">
-        <svg xmlns="http://www.w3.org/2000/svg" class="size-4 me-2 inline-block text-base-content/50" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
-        <span class="line-through">Seamless cloud integration</span>
-      </li>
-      <li class="opacity-50">
-        <svg xmlns="http://www.w3.org/2000/svg" class="size-4 me-2 inline-block text-base-content/50" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
-        <span class="line-through">Real-time collaboration tools</span>
-      </li>
-    </ul>
-    <div class="mt-6">
-      <button class="btn btn-primary btn-block">Subscribe</button>
-    </div>
-  </div>
-</div>
-```
-
-### Responsive card vertical on small screen horizontal on large screen
-
-Source: `playground/components/card/responsive-card-vertical-on-small-screen-horizontal-on-large-screen.html`
-
-```html
-<div class="card lg:card-side bg-base-100 shadow-sm">
-  <figure>
-    <img
-      src="https://img.daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.webp"
-      alt="Album" />
-  </figure>
-  <div class="card-body">
-    <h2 class="card-title">New album is released!</h2>
-    <p>Click the button to listen on Spotiwhy app.</p>
-    <div class="card-actions justify-end">
-      <button class="btn btn-primary">Listen</button>
-    </div>
-  </div>
-</div>
-```