tutuca 0.9.39 → 0.9.41

package/skill/margaui/components/collapse.md

@@ -0,0 +1,172 @@
+# collapse
+
+_single show/hide region (details/summary or checkbox)_
+
+## What it does
+
+Single expandable region driven by `<details>`, a checkbox, or focus.
+
+## When to use
+
+- One-off show-more / read-more sections.
+- For grouped single-open behavior across many items, use **accordion**.
+
+## Core classes
+
+`collapse`; modifiers `collapse-arrow|plus|open|close`; inner `collapse-title`, `collapse-content`.
+
+## Examples
+
+###  collapse using details and summary tag
+
+Source: `playground/components/collapse/-collapse-using-details-and-summary-tag.html`
+
+```html
+<details class="collapse bg-base-100 border-base-300 border">
+  <summary class="collapse-title font-semibold">How do I create an account?</summary>
+  <div class="collapse-content text-sm">
+    Click the "Sign Up" button in the top right corner and follow the registration process.
+  </div>
+</details>
+```
+
+### Collapse with checkbox
+
+Source: `playground/components/collapse/collapse-with-checkbox.html`
+
+```html
+<div class="collapse bg-base-100 border-base-300 border">
+  <input type="checkbox" />
+  <div class="collapse-title font-semibold">How do I create an account?</div>
+  <div class="collapse-content text-sm">
+    Click the "Sign Up" button in the top right corner and follow the registration process.
+  </div>
+</div>
+```
+
+### Collapse with focus
+
+Source: `playground/components/collapse/collapse-with-focus.html`
+
+```html
+<div tabindex="0" class="collapse bg-base-100 border-base-300 border">
+  <div class="collapse-title font-semibold">How do I create an account?</div>
+  <div class="collapse-content text-sm">
+    Click the "Sign Up" button in the top right corner and follow the registration process.
+  </div>
+</div>
+```
+
+### Custom colors for collapse that works with checkbox
+
+Source: `playground/components/collapse/custom-colors-for-collapse-that-works-with-checkbox.html`
+
+```html
+<div class="bg-base-100 border-base-300 collapse border">
+  <input type="checkbox" class="peer" />
+  <div
+    class="collapse-title bg-primary text-primary-content peer-checked:bg-secondary peer-checked:text-secondary-content"
+  >
+    How do I create an account?
+  </div>
+  <div
+    class="collapse-content bg-primary text-primary-content peer-checked:bg-secondary peer-checked:text-secondary-content"
+  >
+    Click the "Sign Up" button in the top right corner and follow the registration process.
+  </div>
+</div>
+```
+
+### Custom colors for collapse that works with focus
+
+Source: `playground/components/collapse/custom-colors-for-collapse-that-works-with-focus.html`
+
+```html
+<div
+  tabindex="0"
+  class="bg-primary text-primary-content focus:bg-secondary focus:text-secondary-content collapse"
+>
+  <div class="collapse-title font-semibold">How do I create an account?</div>
+  <div class="collapse-content text-sm">
+    Click the "Sign Up" button in the top right corner and follow the registration process.
+  </div>
+</div>
+```
+
+### Force close
+
+Source: `playground/components/collapse/force-close.html`
+
+```html
+<div tabindex="0" class="collapse collapse-close bg-base-100 border-base-300 border">
+  <div class="collapse-title font-semibold">I have collapse-close class</div>
+  <div class="collapse-content text-sm">
+    Click the "Sign Up" button in the top right corner and follow the registration process.
+  </div>
+</div>
+```
+
+### Force open
+
+Source: `playground/components/collapse/force-open.html`
+
+```html
+<div tabindex="0" class="collapse collapse-open bg-base-100 border-base-300 border">
+  <div class="collapse-title font-semibold">I have collapse-open class</div>
+  <div class="collapse-content text-sm">
+    Click the "Sign Up" button in the top right corner and follow the registration process.
+  </div>
+</div>
+```
+
+### Moving collapse icon to the start
+
+Source: `playground/components/collapse/moving-collapse-icon-to-the-start.html`
+
+```html
+<div tabindex="0" class="collapse collapse-arrow bg-base-100 border-base-300 border">
+  <div class="collapse-title font-semibold after:start-5 after:end-auto pe-4 ps-12">How do I create an account?</div>
+  <div class="collapse-content text-sm">
+    Click the "Sign Up" button in the top right corner and follow the registration process.
+  </div>
+</div>
+```
+
+### With arrow icon
+
+Source: `playground/components/collapse/with-arrow-icon.html`
+
+```html
+<div tabindex="0" class="collapse collapse-arrow bg-base-100 border-base-300 border">
+  <div class="collapse-title font-semibold">How do I create an account?</div>
+  <div class="collapse-content text-sm">
+    Click the "Sign Up" button in the top right corner and follow the registration process.
+  </div>
+</div>
+```
+
+### With arrow plusminus icon
+
+Source: `playground/components/collapse/with-arrow-plusminus-icon.html`
+
+```html
+<div tabindex="0" class="collapse collapse-plus bg-base-100 border-base-300 border">
+  <div class="collapse-title font-semibold">How do I create an account?</div>
+  <div class="collapse-content text-sm">
+    Click the "Sign Up" button in the top right corner and follow the registration process.
+  </div>
+</div>
+```
+
+### Without border and background color
+
+Source: `playground/components/collapse/without-border-and-background-color.html`
+
+```html
+<div tabindex="0" class="collapse">
+  <div class="collapse-title font-semibold">How do I create an account?</div>
+  <div class="collapse-content text-sm">
+    Click the "Sign Up" button in the top right corner and follow the registration process.
+  </div>
+</div>
+```

package/skill/margaui/components/countdown.md

@@ -0,0 +1,165 @@
+# countdown
+
+_animated digit transitions for timers / clocks_
+
+## What it does
+
+Animates between digits using CSS counters and `--value`. Works for clocks, timers, large stat displays.
+
+## When to use
+
+- Live countdown timers, clocks, animated number reveals.
+
+## Core classes
+
+`countdown`; child `<span style="--value:N"></span>` per digit group.
+
+## Examples
+
+### Countdown
+
+Source: `playground/components/countdown/countdown.html`
+
+```html
+<span class="countdown">
+  <span style="--value:59;" aria-live="polite" aria-label="59">59</span>
+</span>
+```
+
+### Clock countdown with colons
+
+Source: `playground/components/countdown/clock-countdown-with-colons.html`
+
+```html
+<span class="countdown font-mono text-2xl">
+  <span style="--value:10;" aria-live="polite" aria-label="10">10</span>
+  :
+  <span style="--value:24; --digits: 2;" aria-live="polite" aria-label="24">24</span>
+  :
+  <span style="--value:59; --digits: 2;" aria-live="polite" aria-label="59">59</span>
+</span>
+```
+
+### Clock countdown
+
+Source: `playground/components/countdown/clock-countdown.html`
+
+```html
+<span class="countdown font-mono text-2xl">
+  <span style="--value:10;" aria-live="polite" aria-label="10">10</span>
+  h
+  <span style="--value:24;" aria-live="polite" aria-label="24">24</span>
+  m
+  <span style="--value:59;" aria-live="polite" aria-label="59">59</span>
+  s
+</span>
+```
+
+### In boxes
+
+Source: `playground/components/countdown/in-boxes.html`
+
+```html
+<div class="grid auto-cols-max grid-flow-col gap-5 text-center">
+  <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
+    <span class="countdown font-mono text-5xl">
+      <span style="--value:15;" aria-live="polite" aria-label="15">15</span>
+    </span>
+    days
+  </div>
+  <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
+    <span class="countdown font-mono text-5xl">
+      <span style="--value:10;" aria-live="polite" aria-label="10">10</span>
+    </span>
+    hours
+  </div>
+  <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
+    <span class="countdown font-mono text-5xl">
+      <span style="--value:24;" aria-live="polite" aria-label="24">24</span>
+    </span>
+    min
+  </div>
+  <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2">
+    <span class="countdown font-mono text-5xl">
+      <span style="--value:59;" aria-live="polite" aria-label="59">59</span>
+    </span>
+    sec
+  </div>
+</div>
+```
+
+### Large text with 2 digits
+
+Source: `playground/components/countdown/large-text-with-2-digits.html`
+
+```html
+<span class="countdown font-mono text-6xl">
+  <span style="--value:59; --digits: 2;" aria-live="polite" aria-label="59">59</span>
+</span>
+```
+
+### Large text with labels under
+
+Source: `playground/components/countdown/large-text-with-labels-under.html`
+
+```html
+<div class="grid auto-cols-max grid-flow-col gap-5 text-center">
+  <div class="flex flex-col">
+    <span class="countdown font-mono text-5xl">
+      <span style="--value:15;" aria-live="polite" aria-label="15">15</span>
+    </span>
+    days
+  </div>
+  <div class="flex flex-col">
+    <span class="countdown font-mono text-5xl">
+      <span style="--value:10;" aria-live="polite" aria-label="10">10</span>
+    </span>
+    hours
+  </div>
+  <div class="flex flex-col">
+    <span class="countdown font-mono text-5xl">
+      <span style="--value:24;" aria-live="polite" aria-label="24">24</span>
+    </span>
+    min
+  </div>
+  <div class="flex flex-col">
+    <span class="countdown font-mono text-5xl">
+      <span style="--value:59;" aria-live="polite" aria-label="59">59</span>
+    </span>
+    sec
+  </div>
+</div>
+```
+
+### Large text with labels
+
+Source: `playground/components/countdown/large-text-with-labels.html`
+
+```html
+<div class="flex gap-5">
+  <div>
+    <span class="countdown font-mono text-4xl">
+      <span style="--value:15;" aria-live="polite" aria-label="15">15</span>
+    </span>
+    days
+  </div>
+  <div>
+    <span class="countdown font-mono text-4xl">
+      <span style="--value:10;" aria-live="polite" aria-label="10">10</span>
+    </span>
+    hours
+  </div>
+  <div>
+    <span class="countdown font-mono text-4xl">
+      <span style="--value:24;" aria-live="polite" aria-label="24">24</span>
+    </span>
+    min
+  </div>
+  <div>
+    <span class="countdown font-mono text-4xl">
+      <span style="--value:59;" aria-live="polite" aria-label="59">59</span>
+    </span>
+    sec
+  </div>
+</div>
+```

package/skill/margaui/components/diff.md

@@ -0,0 +1,53 @@
+# diff
+
+_side-by-side image/text comparison with draggable handle_
+
+## What it does
+
+Two-pane comparison with a draggable resizer.
+
+## When to use
+
+- Before/after image comparisons, theme/typography comparisons.
+
+## Core classes
+
+`diff`; inner `diff-item-1`, `diff-item-2`, `diff-resizer`.
+
+## Examples
+
+### Diff
+
+Source: `playground/components/diff/diff.html`
+
+```html
+<figure class="diff aspect-16/9" tabindex="0">
+  <div class="diff-item-1" role="img" tabindex="0">
+    <img alt="daisy" src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp" />
+  </div>
+  <div class="diff-item-2" role="img">
+    <img
+      alt="daisy"
+      src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp" />
+  </div>
+  <div class="diff-resizer"></div>
+</figure>
+```
+
+### Diff text
+
+Source: `playground/components/diff/diff-text.html`
+
+```html
+<figure class="diff aspect-16/9" tabindex="0">
+  <div class="diff-item-1" role="img" tabindex="0">
+    <div class="bg-primary text-primary-content grid place-content-center text-9xl font-black">
+      DAISY
+    </div>
+  </div>
+  <div class="diff-item-2" role="img">
+    <div class="bg-base-200 grid place-content-center text-9xl font-black">DAISY</div>
+  </div>
+  <div class="diff-resizer"></div>
+</figure>
+```

package/skill/margaui/components/divider.md

@@ -0,0 +1,107 @@
+# divider
+
+_horizontal / vertical separator with optional label_
+
+## What it does
+
+Separator line with optional centered text and optional color.
+
+## When to use
+
+- Visually separating form sections, content blocks, sidebar groups.
+
+## Core classes
+
+`divider`; orientation `divider-horizontal|vertical`; position `divider-start|end`; color `divider-primary|secondary|accent|neutral|success|warning|info|error`.
+
+## Examples
+
+### Divider
+
+Source: `playground/components/divider/divider.html`
+
+```html
+<div class="flex w-full flex-col">
+  <div class="card bg-base-300 rounded-box grid h-20 place-items-center">content</div>
+  <div class="divider">OR</div>
+  <div class="card bg-base-300 rounded-box grid h-20 place-items-center">content</div>
+</div>
+```
+
+### Divider horizontal
+
+Source: `playground/components/divider/divider-horizontal.html`
+
+```html
+<div class="flex w-full">
+  <div class="card bg-base-300 rounded-box grid h-20 grow place-items-center">content</div>
+  <div class="divider divider-horizontal">OR</div>
+  <div class="card bg-base-300 rounded-box grid h-20 grow place-items-center">content</div>
+</div>
+```
+
+### Divider in different positions horizontal
+
+Source: `playground/components/divider/divider-in-different-positions-horizontal.html`
+
+```html
+<div class="flex w-full">
+  <div class="divider divider-horizontal divider-start">Start</div>
+  <div class="divider divider-horizontal">Default</div>
+  <div class="divider divider-horizontal divider-end">End</div>
+</div>
+```
+
+### Divider in different positions
+
+Source: `playground/components/divider/divider-in-different-positions.html`
+
+```html
+<div class="flex w-full flex-col">
+  <div class="divider divider-start">Start</div>
+  <div class="divider">Default</div>
+  <div class="divider divider-end">End</div>
+</div>
+```
+
+### Divider with colors
+
+Source: `playground/components/divider/divider-with-colors.html`
+
+```html
+<div class="flex w-full flex-col">
+  <div class="divider">Default</div>
+  <div class="divider divider-neutral">Neutral</div>
+  <div class="divider divider-primary">Primary</div>
+  <div class="divider divider-secondary">Secondary</div>
+  <div class="divider divider-accent">Accent</div>
+  <div class="divider divider-success">Success</div>
+  <div class="divider divider-warning">Warning</div>
+  <div class="divider divider-info">Info</div>
+  <div class="divider divider-error">Error</div>
+</div>
+```
+
+### Divider with no text
+
+Source: `playground/components/divider/divider-with-no-text.html`
+
+```html
+<div class="flex w-full flex-col">
+  <div class="card bg-base-300 rounded-box grid h-20 place-items-center">content</div>
+  <div class="divider"></div>
+  <div class="card bg-base-300 rounded-box grid h-20 place-items-center">content</div>
+</div>
+```
+
+### Responsive lgdivider horizontal
+
+Source: `playground/components/divider/responsive-lgdivider-horizontal.html`
+
+```html
+<div class="flex w-full flex-col lg:flex-row">
+  <div class="card bg-base-300 rounded-box grid h-32 grow place-items-center">content</div>
+  <div class="divider lg:divider-horizontal">OR</div>
+  <div class="card bg-base-300 rounded-box grid h-32 grow place-items-center">content</div>
+</div>
+```