tutuca 0.11.2 → 0.12.0

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

package/skill/margaui/components/tab.md

@@ -0,0 +1,248 @@
+# tab
+
+_tabbed content (radio inputs or anchors)_
+
+## What it does
+
+Tab strip — radio-driven (CSS-only, supports content panels per tab) or anchor-driven (just visual styling).
+
+## When to use
+
+- Section switchers within a page.
+
+## Core classes
+
+`tabs`; style `tabs-box|border|lift`; size `tabs-xs|sm|md|lg|xl`; child `tab`, `tab-active`; content `tab-content`.
+
+## Examples
+
+### Radio tabs border — tab content
+
+Source: `playground/components/tab/radio-tabs-border--tab-content.html`
+
+```html
+<!-- name of each tab group should be unique -->
+<div class="tabs tabs-border">
+  <input type="radio" name="my_tabs_2" class="tab" aria-label="Tab 1" />
+  <div class="tab-content border-base-300 bg-base-100 p-10">Tab content 1</div>
+
+  <input type="radio" name="my_tabs_2" class="tab" aria-label="Tab 2" checked="checked" />
+  <div class="tab-content border-base-300 bg-base-100 p-10">Tab content 2</div>
+
+  <input type="radio" name="my_tabs_2" class="tab" aria-label="Tab 3" />
+  <div class="tab-content border-base-300 bg-base-100 p-10">Tab content 3</div>
+</div>
+```
+
+### Radio tabs box — tab content
+
+Source: `playground/components/tab/radio-tabs-box--tab-content.html`
+
+```html
+<!-- name of each tab group should be unique -->
+<div class="tabs tabs-box">
+  <input type="radio" name="my_tabs_6" class="tab" aria-label="Tab 1" />
+  <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
+
+  <input type="radio" name="my_tabs_6" class="tab" aria-label="Tab 2" checked="checked" />
+  <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
+
+  <input type="radio" name="my_tabs_6" class="tab" aria-label="Tab 3" />
+  <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
+</div>
+```
+
+### Radio tabs lift — tab content on bottom
+
+Source: `playground/components/tab/radio-tabs-lift--tab-content-on-bottom.html`
+
+```html
+<!-- name of each tab group should be unique -->
+<div class="tabs tabs-lift tabs-bottom">
+  <input type="radio" name="my_tabs_5" class="tab" aria-label="Tab 1" />
+  <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
+
+  <input type="radio" name="my_tabs_5" class="tab" aria-label="Tab 2" checked="checked" />
+  <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
+
+  <input type="radio" name="my_tabs_5" class="tab" aria-label="Tab 3" />
+  <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
+</div>
+```
+
+### Radio tabs lift — tab content
+
+Source: `playground/components/tab/radio-tabs-lift--tab-content.html`
+
+```html
+<!-- name of each tab group should be unique -->
+<div class="tabs tabs-lift">
+  <input type="radio" name="my_tabs_3" class="tab" aria-label="Tab 1" />
+  <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
+
+  <input type="radio" name="my_tabs_3" class="tab" aria-label="Tab 2" checked="checked" />
+  <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
+
+  <input type="radio" name="my_tabs_3" class="tab" aria-label="Tab 3" />
+  <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
+</div>
+```
+
+### Radio tabs lift with icons — tab content
+
+Source: `playground/components/tab/radio-tabs-lift-with-icons--tab-content.html`
+
+```html
+<!-- name of each tab group should be unique -->
+<div class="tabs tabs-lift">
+  <label class="tab">
+    <input type="radio" name="my_tabs_4" />
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 me-2"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" /></svg>
+    Live
+  </label>
+  <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
+
+  <label class="tab">
+    <input type="radio" name="my_tabs_4" checked="checked" />
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 me-2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" /></svg>
+    Laugh
+  </label>
+  <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
+
+  <label class="tab">
+    <input type="radio" name="my_tabs_4" />
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 me-2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
+    Love
+  </label>
+  <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
+</div>
+```
+
+### Sizes
+
+Source: `playground/components/tab/sizes.html`
+
+```html
+
+<div role="tablist" class="tabs tabs-lift tabs-xs">
+  <a role="tab" class="tab">Xsmall</a>
+  <a role="tab" class="tab tab-active">Xsmall</a>
+  <a role="tab" class="tab">Xsmall</a>
+</div>
+
+<div role="tablist" class="tabs tabs-lift tabs-sm">
+  <a role="tab" class="tab">Small</a>
+  <a role="tab" class="tab tab-active">Small</a>
+  <a role="tab" class="tab">Small</a>
+</div>
+
+<div role="tablist" class="tabs tabs-lift">
+  <a role="tab" class="tab">Medium</a>
+  <a role="tab" class="tab tab-active">Medium</a>
+  <a role="tab" class="tab">Medium</a>
+</div>
+
+<div role="tablist" class="tabs tabs-lift tabs-lg">
+  <a role="tab" class="tab">Large</a>
+  <a role="tab" class="tab tab-active">Large</a>
+  <a role="tab" class="tab">Large</a>
+</div>
+
+<div role="tablist" class="tabs tabs-lift tabs-xl">
+  <a role="tab" class="tab">Xlarge</a>
+  <a role="tab" class="tab tab-active">Xlarge</a>
+  <a role="tab" class="tab">Xlarge</a>
+</div>
+```
+
+### Tabs border
+
+Source: `playground/components/tab/tabs-border.html`
+
+```html
+<div role="tablist" class="tabs tabs-border">
+  <a role="tab" class="tab">Tab 1</a>
+  <a role="tab" class="tab tab-active">Tab 2</a>
+  <a role="tab" class="tab">Tab 3</a>
+</div>
+```
+
+### Tabs box using radio inputs
+
+Source: `playground/components/tab/tabs-box-using-radio-inputs.html`
+
+```html
+<!-- name of each tab group should be unique -->
+<div class="tabs tabs-box">
+  <input type="radio" name="my_tabs_1" class="tab" aria-label="Tab 1" />
+  <input type="radio" name="my_tabs_1" class="tab" aria-label="Tab 2" checked="checked" />
+  <input type="radio" name="my_tabs_1" class="tab" aria-label="Tab 3" />
+</div>
+```
+
+### Tabs box with a horizontal scroll when theres no space
+
+Source: `playground/components/tab/tabs-box-with-a-horizontal-scroll-when-theres-no-space.html`
+
+```html
+<div class="overflow-x-auto max-w-60">
+  <div class="tabs-lift tabs min-w-max">
+    <input type="radio" name="my_tabs_7" class="tab z-1" aria-label="Tab title 1" />
+    <div class="sticky start-0 tab-content max-w-60 border-base-300 bg-base-100 p-6">Tab content 1</div>
+    <input type="radio" name="my_tabs_7" class="tab z-1" aria-label="Tab title 2" checked="checked" />
+    <div class="sticky start-0 tab-content max-w-60 border-base-300 bg-base-100 p-6">Tab content 2</div>
+    <input type="radio" name="my_tabs_7" class="tab z-1" aria-label="Tab title 3" />
+    <div class="sticky start-0 tab-content max-w-60 border-base-300 bg-base-100 p-6">Tab content 3</div>
+    <input type="radio" name="my_tabs_7" class="tab z-1" aria-label="Tab title 4" />
+    <div class="sticky start-0 tab-content max-w-60 border-base-300 bg-base-100 p-6">Tab content 4</div>
+  </div>
+</div>
+```
+
+### Tabs box
+
+Source: `playground/components/tab/tabs-box.html`
+
+```html
+<div role="tablist" class="tabs tabs-box">
+  <a role="tab" class="tab">Tab 1</a>
+  <a role="tab" class="tab tab-active">Tab 2</a>
+  <a role="tab" class="tab">Tab 3</a>
+</div>
+```
+
+### Tabs lift
+
+Source: `playground/components/tab/tabs-lift.html`
+
+```html
+<div role="tablist" class="tabs tabs-lift">
+  <a role="tab" class="tab">Tab 1</a>
+  <a role="tab" class="tab tab-active">Tab 2</a>
+  <a role="tab" class="tab">Tab 3</a>
+</div>
+```
+
+### Tabs with custom color
+
+Source: `playground/components/tab/tabs-with-custom-color.html`
+
+```html
+<div role="tablist" class="tabs tabs-lift">
+  <a role="tab" class="tab">Tab 1</a>
+  <a role="tab" class="tab tab-active text-primary [--tab-bg:orange] [--tab-border-color:red]"> Tab 2</a>
+  <a role="tab" class="tab">Tab 3</a>
+</div>
+```
+
+### Tabs
+
+Source: `playground/components/tab/tabs.html`
+
+```html
+<div role="tablist" class="tabs">
+  <a role="tab" class="tab">Tab 1</a>
+  <a role="tab" class="tab tab-active">Tab 2</a>
+  <a role="tab" class="tab">Tab 3</a>
+</div>
+```