@pokle/basecoat 0.3.10-beta2.pokle

package/docs/src/_includes/partials/kitchen-sink/alert.njk

@@ -0,0 +1,72 @@
+<section id="alert"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
+    <h2 class="text-sm font-medium">Alert</h2>
+    <a href="/components/alert" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
+  </header>
+  <div class="p-4">
+    <div class="grid max-w-xl items-start gap-4">
+      <div class="alert">
+        {% lucide "circle-check" %}
+        <h2>Success! Your changes have been saved</h2>
+        <section>This is an alert with icon, title and description.</section>
+      </div>
+
+      <div class="alert">
+        {% lucide "bookmark-check" %}
+        <section>This is an alert with icon, description and no title.</section>
+      </div>
+
+      <div class="alert">
+        <section>This one has a description only. No title. No icon.</section>
+      </div>
+
+      <div class="alert">
+        {% lucide "popcorn" %}
+        <h2>Let's try one with icon and title.</h2>
+      </div>
+
+      <div class="alert">
+        {% lucide "shield-alert" %}
+        <h2>This is a very long alert title that demonstrates how the component handles extended text content and potentially wraps across multiple lines</h2>
+      </div>
+
+      <div class="alert">
+        {% lucide "gift" %}
+        <section>This is a very long alert description that demonstrates how the component handles extended text content and potentially wraps across multiple lines</section>
+      </div>
+
+      <div class="alert">
+        {% lucide "circle-alert" %}
+        <h2>This is an extremely long alert title that spans multiple lines to demonstrate how the component handles very lengthy headings while maintaining readability and proper text wrapping behavior</h2>
+        <section>This is an equally long description that contains detailed information about the alert. It shows how the component can accommodate extensive content while preserving proper spacing, alignment, and readability across different screen sizes and viewport widths. This helps ensure the user experience remains consistent regardless of the content length.</section>
+      </div>
+
+      <div class="alert-destructive">
+        {% lucide "circle-alert" %}
+        <h2>Something went wrong!</h2>
+        <section>Your session has expired. Please log in again.</section>
+      </div>
+
+      <div class="alert-destructive">
+        {% lucide "circle-alert" %}
+        <h2>Something went wrong!</h2>
+        <section>
+          <p>Please verify your billing information and try again.</p>
+          <ul>
+            <li>Check your card details</li>
+            <li>Ensure sufficient funds</li>
+            <li>Verify billing address</li>
+          </ul>
+        </section>
+      </div>
+
+      <div class="alert border-amber-50 bg-amber-50 text-amber-900 dark:border-amber-950 dark:bg-amber-950 dark:text-amber-100">
+        {% lucide "circle-check" %}
+        <h2>Plot Twist: This Alert is Actually Amber!</h2>
+        <section>This one has custom colors for light and dark mode.</section>
+      </div>
+    </div>
+  </div>
+</section>

package/docs/src/_includes/partials/kitchen-sink/avatar.njk

@@ -0,0 +1,37 @@
+<section id="avatar"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
+    <h2 class="text-sm font-medium">Avatar</h2>
+    <a href="/components/avatar" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-row flex-wrap items-center gap-4">
+      <img class="size-8 shrink-0 object-cover rounded-full" alt="@hunvreus" src="https://github.com/hunvreus.png">
+      
+      <span class="size-8 shrink-0 bg-muted flex items-center justify-center rounded-full">CN</span>
+      
+      <img class="size-12 shrink-0 object-cover rounded-full" alt="@hunvreus" src="https://github.com/hunvreus.png">
+      
+      <img class="size-8 shrink-0 object-cover rounded-lg" alt="@hunvreus" src="https://github.com/hunvreus.png">
+
+      <div class="flex -space-x-2 [&_img]:ring-background [&_img]:ring-2 [&_img]:grayscale [&_img]:size-8 [&_img]:shrink-0 [&_img]:object-cover [&_img]:rounded-full">
+        <img alt="@hunvreus" src="https://github.com/hunvreus.png">
+        <img alt="@shadcn" src="https://github.com/shadcn.png">
+        <img alt="@adamwathan" src="https://github.com/adamwathan.png">
+      </div>
+
+      <div class="flex -space-x-2 [&_img]:ring-background [&_img]:ring-2 [&_img]:grayscale [&_img]:size-12 [&_img]:shrink-0 [&_img]:object-cover [&_img]:rounded-full">
+        <img alt="@hunvreus" src="https://github.com/hunvreus.png">
+        <img alt="@shadcn" src="https://github.com/shadcn.png">
+        <img alt="@adamwathan" src="https://github.com/adamwathan.png">
+      </div>
+
+      <div class="flex -space-x-2 hover:space-x-1 [&_img]:ring-background [&_img]:size-12 [&_img]:shrink-0 [&_img]:object-cover [&_img]:rounded-full [&_img]:ring-2 [&_img]:grayscale [&_img]:transition-all [&_img]:ease-in-out [&_img]:duration-300">
+        <img alt="@hunvreus" src="https://github.com/hunvreus.png">
+        <img alt="@shadcn" src="https://github.com/shadcn.png">
+        <img alt="@adamwathan" src="https://github.com/adamwathan.png">
+      </div>
+    </div>
+  </div>
+</section>

package/docs/src/_includes/partials/kitchen-sink/badge.njk

@@ -0,0 +1,47 @@
+<section id="badge"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
+    <h2 class="text-sm font-medium">Badge</h2>
+    <a href="/components/badge" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-col gap-2">
+      <div class="flex flex-wrap items-center gap-2 md:flex-row">
+        <span class="badge">Primary</span>
+        <span class="badge-secondary">Secondary</span>
+        <span class="badge-outline">Outline</span>
+        <span class="badge-destructive">Destructive</span>
+        <span class="badge-outline">
+          {% lucide "check" %}
+          Badge
+        </span>
+        <span class="badge-destructive">
+          {% lucide "circle-alert" %}
+          Alert
+        </span>
+        <span class="badge rounded-full min-w-5 px-1">8</span>
+        <span class="badge-destructive rounded-full min-w-5 px-1">99</span>
+        <span class="badge-outline rounded-full min-w-5 px-1 font-mono tabular-nums">20+</span>
+      </div>
+      <div class="flex flex-wrap items-center gap-2 md:flex-row">
+        <a href="#" class="badge">
+          Link
+          {% lucide "arrow-right" %}
+        </a>
+        <a href="#" class="badge-secondary">
+          Link
+          {% lucide "arrow-right" %}
+        </a>
+        <a href="#" class="badge-destructive">
+          Link
+          {% lucide "arrow-right" %}
+        </a>
+        <a href="#" class="badge-outline">
+          Link
+          {% lucide "arrow-right" %}
+        </a>
+      </div>
+    </div>
+  </div>
+</section>

package/docs/src/_includes/partials/kitchen-sink/breadcrumb.njk

@@ -0,0 +1,42 @@
+{% from "dropdown-menu.njk" import dropdown_menu %}
+
+<section id="breadcrumb"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
+    <h2 class="text-sm font-medium">Breadcrumb</h2>
+    <a href="/components/breadcrumb" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
+  </header>
+  <div class="p-4">
+    <ol class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5">
+      <li class="inline-flex items-center gap-1.5">
+        <a href="#" class="hover:text-foreground transition-colors">Home</a>
+      </li>
+      <li>{% lucide "chevron-right", { "class": "size-3.5" } %}</li>
+      <li class="inline-flex items-center gap-1.5">
+        {% set trigger %}
+          {% lucide "ellipsis" %}
+        {% endset %}
+        {{ dropdown_menu(
+          id="demo-breadcrumb-menu",
+          trigger=trigger,
+          trigger_attrs={"class": "flex size-9 items-center justify-center h-4 w-4 hover:text-foreground cursor-pointer"},
+          popover_attrs={"class": "p-1"},
+          items=[
+            { label: "Documentation" },
+            { label: "Themes" },
+            { label: "GitHub" }
+          ]
+        ) }}
+      </li>
+      <li>{% lucide "chevron-right", { "class": "size-3.5" } %}</li>
+      <li class="inline-flex items-center gap-1.5">
+        <a href="#" class="hover:text-foreground transition-colors">Components</a>
+      </li>
+      <li>{% lucide "chevron-right", { "class": "size-3.5" } %}</li>
+      <li class="inline-flex items-center gap-1.5">
+        <span class="text-foreground font-normal">Breadcrumb</span>
+      </li>
+    </ol>
+  </div>
+</section>

package/docs/src/_includes/partials/kitchen-sink/button.njk

@@ -0,0 +1,101 @@
+<section id="button"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
+    <h2 class="text-sm font-medium">Button</h2>
+    <a href="/components/button" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-wrap items-center gap-2 md:flex-row">
+        <button class="btn-primary">Primary</button>
+        <button class="btn-outline">Outline</button>
+        <button class="btn-ghost">Ghost</button>
+        <button class="btn-destructive">
+          {% lucide "send" %}
+          Danger
+        </button>
+        <button class="btn-secondary">Secondary</button>
+        <button class="btn-link">Link</button>
+        <button class="btn-outline">
+          {% lucide "send" %}
+          Send
+        </button>
+        <button class="btn-outline">
+          Learn more
+          {% lucide "arrow-right" %}
+        </button>
+        <button class="btn-outline" disabled>
+          {% lucide "loader", { "class": "animate-spin" } %}
+          Loading
+        </button>
+      </div>
+
+      <div class="flex flex-wrap items-center gap-2 md:flex-row">
+        <button class="btn-sm-primary">Primary</button>
+        <button class="btn-sm-outline">Outline</button>
+        <button class="btn-sm-ghost">Ghost</button>
+        <button class="btn-sm-destructive">Danger</button>
+        <button class="btn-sm-secondary">Secondary</button>
+        <button class="btn-sm-link">Link</button>
+        <button class="btn-sm-outline">
+          {% lucide "send" %}
+          Send
+        </button>
+        <button class="btn-sm-outline">
+          Learn more
+          {% lucide "arrow-right" %}
+        </button>
+        <button class="btn-sm-outline" disabled>
+          {% lucide "loader", { "class": "animate-spin" } %}
+          Loading
+        </button>
+      </div>
+
+      <div class="flex flex-wrap items-center gap-2 md:flex-row">
+        <button class="btn-lg-primary">Primary</button>
+        <button class="btn-lg-outline">Outline</button>
+        <button class="btn-lg-ghost">Ghost</button>
+        <button class="btn-lg-destructive">
+          {% lucide "send" %}
+          Danger
+        </button>
+        <button class="btn-lg-secondary">Secondary</button>
+        <button class="btn-lg-link">Link</button>
+        <button class="btn-lg-outline">
+          {% lucide "send" %}
+          Send
+        </button>
+        <button class="btn-lg-outline">
+          Learn more
+          {% lucide "arrow-right" %}
+        </button>
+        <button class="btn-lg-outline" disabled>
+          {% lucide "loader", { "class": "animate-spin" } %}
+          Loading
+        </button>
+      </div>
+
+      <div class="flex flex-wrap items-center gap-2 md:flex-row">
+        <button class="btn-icon-primary">
+          {% lucide "download" %}
+        </button>
+        <button class="btn-icon-secondary">
+          {% lucide "upload" %}
+        </button>
+        <button class="btn-icon-outline">
+          {% lucide "arrow-right" %}
+        </button>
+        <button class="btn-icon-ghost">
+          {% lucide "ellipsis" %}
+        </button>
+        <button class="btn-icon-destructive">
+          {% lucide "trash-2" %}
+        </button>
+        <button class="btn-icon-outline" disabled>
+          {% lucide "loader", { "class": "animate-spin" } %}
+        </button>
+      </div>
+    </div>
+  </div>
+</section>

package/docs/src/_includes/partials/kitchen-sink/card.njk

@@ -0,0 +1,147 @@
+<section id="card"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
+    <h2 class="text-sm font-medium">Card</h2>
+    <a href="/components/card" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-col items-start gap-4">
+      <div class="card w-full max-w-sm">
+        <header>
+          <h2>Login to your account</h2>
+          <p>Enter your details below to login to your account</p>
+        </header>
+        <section>
+          <form class="form grid gap-6">
+            <div class="grid gap-2">
+              <label for="demo-card-form-email">Email</label>
+              <input type="email" id="demo-card-form-email">
+            </div>
+            <div class="grid gap-2">
+              <div class="flex items-center gap-2">
+                <label for="demo-card-form-password">Password</label>
+                <a href="#" class="ml-auto inline-block text-sm underline-offset-4 hover:underline">Forgot your password?</a>
+              </div>
+              <input type="password" id="demo-card-form-password">
+            </div>
+          </form>
+        </section>
+        <footer class="flex flex-col items-center gap-2">
+          <button type="button" class="btn w-full">Login</button>
+          <button type="button" class="btn-outline w-full">Login with Google</button>
+          <p class="mt-4 text-center text-sm">Don't have an account? <a href="#" class="underline-offset-4 hover:underline">Sign up</a></p>
+        </footer>
+      </div>
+
+      <div class="card">
+        <header>
+          <h2>Meeting Notes</h2>
+          <p>Transcript from the meeting with the client.</p>
+        </header>
+        <section class="text-sm">
+          <p>Client requested dashboard redesign with focus on mobile responsiveness.</p>
+          <ol class="mt-4 flex list-decimal flex-col gap-2 pl-6">
+            <li>New analytics widgets for daily/weekly metrics</li>
+            <li>Simplified navigation menu</li>
+            <li>Dark mode support</li>
+            <li>Timeline: 6 weeks</li>
+            <li>Follow-up meeting scheduled for next Tuesday</li>
+          </ol>
+        </section>
+        <footer class="flex items-center">
+          <div class="flex -space-x-2 [&_img]:ring-background [&_img]:ring-2 [&_img]:grayscale [&_img]:size-8 [&_img]:shrink-0 [&_img]:object-cover [&_img]:rounded-full">
+            <img alt="@hunvreus" src="https://github.com/hunvreus.png">
+            <img alt="@shadcn" src="https://github.com/shadcn.png">
+            <img alt="@adamwathan" src="https://github.com/adamwathan.png">
+          </div>
+        </footer>
+      </div>
+
+      <div class="card">
+        <header>
+          <h2>Is this an image?</h2>
+          <p>This is a card with an image.</p>
+        </header>
+        <section class="px-0">
+          <img
+            alt="Photo by Drew Beamer"
+            loading="lazy"
+            width="500"
+            height="500"
+            class="aspect-video object-cover" style="color:transparent"
+            srcset="
+              https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80&w=640&q=75 1x,
+              https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80&w=1080&q=75 2x
+            "
+            src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80&w=1080&q=75"
+          />
+        </section>
+        <footer class="flex items-center gap-2">
+          <span class="badge-outline">
+            {% lucide "bed" %}
+            1
+          </span>
+          <span class="badge-outline">
+            {% lucide "bath" %}
+            2
+          </span>
+          <span class="badge-outline">
+            {% lucide "land-plot" %}
+            350m²
+          </span>
+          <span class="ml-auto font-medium tabular-nums">
+            $135,000
+          </span>
+        </footer>
+      </div>
+
+      <div class="flex w-full flex-wrap items-start gap-8 md:*:[.card]:basis-1/4">
+        <div class="card">
+          <section>Content Only</section>
+        </div>
+
+        <div class="card">
+          <header>
+            <h2>Header Only</h2>
+            <p>This is a card with a header and a description.</p>
+          </header>
+        </div>
+
+        <div class="card">
+          <header>
+            <h2>Header and Content</h2>
+            <p>This is a card with a header and a content.</p>
+          </header>
+          <section>Content only.</section>
+        </div>
+
+        <div class="card">
+          <footer>Footer Only</footer>
+        </div>
+
+        <div class="card">
+          <header>
+            <h2>Header + Footer</h2>
+            <p>This is a card with a header and a footer.</p>
+          </header>
+          <footer>Footer</footer>
+        </div>
+
+        <div class="card">
+          <section>Content</section>
+          <footer>Footer</footer>
+        </div>
+
+        <div class="card">
+          <header>
+            <h2>Header + Content + Footer</h2>
+            <p>This is a card with a header, content and footer.</p>
+          </header>
+          <section>Content</section>
+          <footer>Footer</footer>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

package/docs/src/_includes/partials/kitchen-sink/checkbox.njk

@@ -0,0 +1,34 @@
+<section id="checkbox"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
+    <h2 class="text-sm font-medium">Checkbox</h2>
+    <a href="/components/checkbox" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-col gap-6 max-w-lg">
+      <label class="label gap-3">
+        <input type="checkbox" class="input">
+        Accept terms and conditions
+      </label>
+      <div class="flex items-start gap-3">
+        <input type="checkbox" id="demo-checkbox-label-and-description" class="input">
+        <div class="grid gap-2">
+          <label for="demo-checkbox-label-and-description" class="label">Accept terms and conditions</label>
+          <p class="text-muted-foreground text-sm">By clicking this checkbox, you agree to the terms and conditions.</p>
+        </div>
+      </div>
+      <label class="label gap-3">
+        <input type="checkbox" class="input" disabled>
+        Enable notifications
+      </label>
+      <label class="flex items-start gap-3 border p-3 hover:bg-accent/50 rounded-lg has-[input[type='checkbox']:checked]:border-blue-600 has-[input[type='checkbox']:checked]:bg-blue-50 dark:has-[input[type='checkbox']:checked]:border-blue-900 dark:has-[input[type='checkbox']:checked]:bg-blue-950">
+        <input type="checkbox" class="input checked:bg-blue-600 checked:border-blue-600 dark:checked:bg-blue-700 dark:checked:border-blue-700 checked:after:bg-white" checked>
+        <div class="grid gap-2">
+          <h2 class="text-sm leading-none font-medium">Enable notifications</h2>
+          <p class="text-muted-foreground text-sm">You can enable or disable notifications at any time.</p>
+        </div>
+      </label>
+    </div>
+  </div>
+</section>

package/docs/src/_includes/partials/kitchen-sink/combobox.njk

@@ -0,0 +1,83 @@
+{% from "select.njk" import select %}
+
+<section id="combobox"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
+    <h2 class="text-sm font-medium">Combobox</h2>
+    <a href="/components/combobox" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-wrap items-start gap-4">
+      {% set options_frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"] %}
+      {% call select(
+        popover_attrs={"class": "w-48"},
+        listbox_attrs={"data-empty": "No framework found."},
+        is_combobox=true
+      ) %}
+        {% for framework in options_frameworks %}
+          <div role="option" data-value="{{ framework }}">{{ framework }}</div>
+        {% endfor %}
+      {% endcall %}
+
+      {% set options_timezones = [
+        {
+          label: "Americas",
+          timezones: [
+            { value: "America/New_York", label: "(GMT-5) New York" },
+            { value: "America/Los_Angeles", label: "(GMT-8) Los Angeles" },
+            { value: "America/Chicago", label: "(GMT-6) Chicago" },
+            { value: "America/Toronto", label: "(GMT-5) Toronto" },
+            { value: "America/Vancouver", label: "(GMT-8) Vancouver" },
+            { value: "America/Sao_Paulo", label: "(GMT-3) São Paulo" }
+          ]
+        },
+        {
+          label: "Europe",
+          timezones: [
+            { value: "Europe/London", label: "(GMT+0) London" },
+            { value: "Europe/Paris", label: "(GMT+1) Paris" },
+            { value: "Europe/Berlin", label: "(GMT+1) Berlin" },
+            { value: "Europe/Rome", label: "(GMT+1) Rome" },
+            { value: "Europe/Madrid", label: "(GMT+1) Madrid" },
+            { value: "Europe/Amsterdam", label: "(GMT+1) Amsterdam" }
+          ]
+        },
+        {
+          label: "Asia/Pacific",
+          timezones: [
+            { value: "Asia/Tokyo", label: "(GMT+9) Tokyo" },
+            { value: "Asia/Shanghai", label: "(GMT+8) Shanghai" },
+            { value: "Asia/Singapore", label: "(GMT+8) Singapore" },
+            { value: "Asia/Dubai", label: "(GMT+4) Dubai" },
+            { value: "Australia/Sydney", label: "(GMT+11) Sydney" },
+            { value: "Asia/Seoul", label: "(GMT+9) Seoul" }
+          ]
+        }
+      ] %}
+      {% call select(
+        popover_attrs={"class": "w-72"},
+        listbox_attrs={"data-empty": "No timezone found."},
+        is_combobox=true
+      ) %}
+        <div class="max-h-64 overflow-y-auto scrollbar">
+          {% for group in options_timezones %}
+            <div role="group" aria-labelledby="demo-combobox-timezones-group-{{ loop.index0 }}">
+              <span id="demo-combobox-timezones-group-{{ loop.index0 }}" role="heading">{{ group.label }}</span>
+              {% for timezone in group.timezones %}
+                <div role="option" data-value="{{ timezone.value}}">
+                  {{ timezone.label }}
+                </div>
+              {% endfor %}
+            </div>
+          {% endfor %}
+        </div>
+        <hr role="separator">
+        <div role="option">
+          {% lucide "circle-plus" %}
+          Create timezone
+        </div>
+      {% endcall %}
+    </div>
+  </div>
+</section>

package/docs/src/_includes/partials/kitchen-sink/dialog.njk

@@ -0,0 +1,65 @@
+{% from "dialog.njk" import dialog %}
+
+<section id="dialog"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
+    <h2 class="text-sm font-medium">Dialog</h2>
+    <a href="/components/dialog" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
+  </header>
+  <div class="p-4">
+    <div class="flex flex-wrap items-center gap-4">
+      {% set footer %}
+        <button class="btn-outline" onclick="document.getElementById('demo-dialog-edit-profile').close()">Cancel</button>
+        <button class="btn" onclick="document.getElementById('demo-dialog-edit-profile').close()">Save changes</button>
+      {% endset %}
+      {% call dialog(
+        id="demo-dialog-edit-profile",
+        title="Edit profile",
+        description="Make changes to your profile here. Click save when you're done.",
+        trigger="Edit Profile",
+        trigger_attrs={"class": "btn-outline"},
+        dialog_attrs={"class": "w-full sm:max-w-[425px] max-h-[612px]"},
+        footer=footer
+      ) %}
+      <form class="form grid gap-4">
+        <div class="grid gap-3">
+          <label for="demo-dialog-edit-profile-name">Name</label>
+          <input type="text" value="Pedro Duarte" id="demo-dialog-edit-profile-name" />
+        </div>
+        <div class="grid gap-3">
+          <label for="demo-dialog-edit-profile-username">Username</label>
+          <input type="text" value="@peduarte" id="demo-dialog-edit-profile-username" />
+        </div>
+      </form>
+      {% endcall %}
+      
+      {% set footer %}
+        <button class="btn-outline" onclick="this.closest('dialog').close()">Close</button>
+      {% endset %}
+      {% call dialog(
+        id="dialog-example",
+        title="Scrollable Content",
+        description="This is a dialog with scrollable content.",
+        trigger="Scrollable Content",
+        trigger_attrs={"class": "btn-outline"},
+        dialog_attrs={"class": "w-full sm:max-w-[425px] max-h-[612px]"},
+        body_attrs={"class": "overflow-y-auto scrollbar"},
+        footer=footer
+      ) %}
+      <div class="space-y-4 text-sm">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </div>
+      {% endcall %}
+    </div>
+  </div>
+</section>