@pokle/basecoat 0.3.10-beta2.pokle

package/docs/src/components/accordion.njk

@@ -0,0 +1,75 @@
+---
+layout: layouts/page.njk
+title: Accordion
+description: A vertically stacked set of interactive headings that each reveal a section of content.
+toc:
+  - label: Usage
+    id: usage
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+
+<div class="alert mb-6">
+  {% lucide "circle-alert" %}
+  <h2>There is no dedicated Accordion component in Basecoat.</h2>
+</div>
+
+{% set code %}<section class="accordion">
+  <details class="group border-b last:border-b-0 ">
+    <summary class="w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md">
+      <h2 class="flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline ">
+        Is it accessible?
+        {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
+      </h2>
+    </summary>
+    <section class="pb-4">
+      <p class="text-sm">Yes. It adheres to the WAI-ARIA design pattern.</p>
+    </section>
+  </details>
+  <details class="group border-b last:border-b-0">
+    <summary class="w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md">
+      <h2 class="flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline ">
+        Is it styled?
+        {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
+      </h2>
+    </summary>
+    <section class="pb-4">
+      <p class="text-sm">Yes. It comes with default styles that matches the other components' aesthetic.</p>
+    </section>
+  </details>
+  <details class="group border-b last:border-b-0">
+    <summary class="w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md">
+      <h2 class="flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline ">
+        Is it animated?
+        {% lucide "chevron-down", { "class": "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180" } %}
+      </h2>
+    </summary>
+    <section>
+      <p class="text-sm whitespace-pre-wrap">Yes. It's animated by default, but you can disable it if you prefer.</p>
+    </section>
+  </details>
+</section>
+<script>
+  (() => {
+    const accordions = document.querySelectorAll('.accordion');
+    accordions.forEach(accordion => {
+      accordion.addEventListener('click', (event) => {
+        const summary = event.target.closest('summary');
+        if (!summary) return;
+        const details = summary.closest('details');
+        if (!details) return;
+        accordion.querySelectorAll('details').forEach(detailsEl => {
+          if (detailsEl !== details) {
+            detailsEl.removeAttribute('open');
+          }
+        });
+      });
+    });
+  })();
+</script>
+{% endset %}
+{{ code_preview("accordion", code | prettyHtml, "w-full max-w-md") }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<p class="prose">Basecoat already animates <code>&lt;details&gt;</code> elements by default. The example add some Tailwind CSS utility classes for style and a bit of vanilla JavaScript to handle the open/close state.</p>

package/docs/src/components/alert-dialog.njk

@@ -0,0 +1,119 @@
+---
+layout: layouts/page.njk
+title: Alert Dialog
+description: A modal dialog that interrupts the user with important content and expects a response.
+toc:
+  - label: Usage
+    id: usage
+    children:
+      - label: HTML
+        id: usage-html
+      - label: Jinja and Nunjucks
+        id: usage-macro
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+{% from "dialog.njk" import dialog %}
+
+{% set code_html %}
+{% set footer %}
+  <button class="btn-outline" onclick="document.getElementById('alert-dialog').close()">Cancel</button>
+  <button class="btn-primary" onclick="document.getElementById('alert-dialog').close()">Continue</button>
+{% endset %}
+{{ dialog(
+  id="alert-dialog",
+  title="Are you absolutely sure?",
+  description="This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
+  trigger="Open alert dialog",
+  trigger_attrs={"class": "btn-outline"},
+  footer=footer,
+  close_button=false,
+  close_on_overlay_click=false
+) }}
+{% endset %}
+
+{{ code_preview("alert-dialog", code_html | prettyHtml) }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<h3 id="usage-default"><a href="#usage-html">HTML</a></h3>
+
+<section class="prose">
+  <p>The Alert Dialog component is identical to <a href="/components/dialog" class="font-medium underline underline-offset-4">Dialog</a> except for two small differences: we do not display a close button and we do not let the user close the dialog when clicking on the backdrop (no <code>onclick</code> attribute on the <code>&lt;dialog&gt;</code> or the <code>&lt;article&gt;</code> elements).</p>
+</section>
+
+{{ code_block(code_html | prettyHtml) }}
+
+<section class="prose">
+  <p>The component has the following HTML structure:</p>
+  <dl>
+    <dt><code class="highlight language-html">&lt;button type="button"&gt;</code> <span class="badge-secondary">Optional</span></dt>
+    <dd>The trigger button to open the alert dialog (using <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal" target="_blank">the native <code>showModal()</code> method</a>).</dd>
+    <dt><code class="highlight language-html">&lt;dialog class="dialog" id="{ DIALOG_ID }"&gt;</code></dt>
+    <dd>Wraps the whole component and acts as the backdrop. It can also have the following attributes:
+      <ul>
+        <li><code>aria-labelledby="{ TITLE_ID }"</code>: linked to by the <code>aria-labelledby</code> attribute of the dialog.</li>
+        <li><code>aria-describedby="{ DESCRIPTION_ID }"</code>: linked to by the <code>aria-describedby</code> attribute of the <code>&lt;dialog&gt;</code>.</li>
+      </ul>
+      <dl>
+        <dt><code class="highlight language-html">&lt;article&gt;</code></dt>
+        <dd>Wraps the content of the alert dialog.
+          <dl>
+            <dt><code class="highlight language-html">&lt;header&gt;</code></dt>
+            <dd>Contains the header for the alert dialog:
+              <dl>
+                <dt><code class="highlight language-html">&lt;h2&gt;</code></dt>
+                <dd>The title of the alert dialog, must have an <code>id</code> if you use the <code>aria-labelledby</code> attribute on the <code>&lt;dialog&gt;</code>.</dd>
+                <dt><code class="highlight language-html">&lt;p&gt;</code> <span class="badge-secondary">Optional</span></dt>
+                <dd>The description of the alert dialog, must have an <code>id</code> if you use the <code>aria-describedby</code> attribute on the <code>&lt;dialog&gt;</code>.</dd>
+              </dl>
+            </dd>
+            <dt><code class="highlight language-html">&lt;section&gt;</code> <span class="badge-secondary">Optional</span></dt>
+            <dd>For the content.</dd>
+            <dt><code class="highlight language-html">&lt;footer&gt;</code> <span class="badge-secondary">Optional</span></dt>
+            <dd>Usually contains actions.</dd>
+          </dl>
+        </dd>
+      </dl>
+    </dd>
+  </dl>
+</section>
+
+<h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
+
+<div class="prose">
+  <p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">dialog()</code> Nunjucks or Jinja macro for this component. Make sure to set <code>close_on_overlay_click</code> and <code>close_button</code> to <code>False</code> (or <code>false</code> for Nunjucks).</p>
+</div>
+
+<div class="flex flex-wrap gap-2 my-6">
+  <a class="badge-outline" href="/installation/#install-macros" target="_blank">
+    Use Nunjucks or Jinja macros
+    {% lucide "arrow-right" %}
+  </a>
+  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/jinja/dialog.html.jinja" target="_blank">
+    Jinja macro
+    {% lucide "arrow-right" %}
+  </a>
+  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/dialog.njk" target="_blank">
+    Nunjucks macro
+    {% lucide "arrow-right" %}
+  </a>
+</div>
+
+{% set raw_code %}{% raw %}{% set footer %}
+  <button class="btn-outline" onclick="document.getElementById('demo-alert-dialog').close()">Cancel</button>
+  <button class="btn-primary" onclick="document.getElementById('demo-alert-dialog').close()">Continue</button>
+{% endset %}
+{{ dialog(
+  id="demo-alert-dialog",
+  title="Are you absolutely sure?",
+  description="This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
+  trigger="Open Alert Dialog",
+  trigger_attrs={"class": "btn-outline"},
+  footer=footer,
+  close_button=False,
+  close_on_overlay_click=False
+) }}{% endraw %}
+{% endset%}
+{{ code_block(raw_code, "jinja") }}

package/docs/src/components/alert.njk

@@ -0,0 +1,108 @@
+---
+layout: layouts/page.njk
+title: Alert
+description: Displays a callout for user attention.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Destructive
+        id: example-destructive
+      - label: No description
+        id: example-no-description
+      - label: No icon
+        id: example-no-icon
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}
+<div class="grid w-full 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 "popcorn" %}
+    <h2>This Alert has a title and an icon. No description.</h2>
+    <section>This is an alert with icon, title and description.</section>
+  </div>
+  <div class="alert-destructive">
+    {% lucide "circle-check" %}
+    <h2>Unable to process your payment.</h2>
+    <section>
+      <p>Please verify your billing information and try again.</p>
+      <ul class="list-inside list-disc text-sm">
+        <li>Check your card details</li>
+        <li>Ensure sufficient funds</li>
+        <li>Verify billing address</li>
+      </ul>
+    </section>
+  </div>
+</div>
+{% endset %}
+{{ code_preview("alert", code | prettyHtml) }}
+
+<h2 id="usage">Usage</h2>
+
+<section class="prose">
+  <p>Use the <code>alert</code> or <code>alert-destructive</code>.</p>
+</section>
+
+{% set code_simple %}
+<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>
+{% endset %}
+{{ code_block(code_simple | prettyHtml) }}
+
+<section class="prose">
+  <p>The component has the following HTML structure:</p>
+  <dl>
+    <dt><code class="highlight language-html">&lt;div class="alert"&gt;</code></dt>
+    <dd>Main container. Use <code>alert</code> for default styling or <code>alert-destructive</code> for error states.
+      <dl>
+        <dt><code class="highlight language-html">&lt;svg&gt;</code> <span class="badge-secondary">Optional</span></dt>
+        <dd>The icon.</dd>
+        <dt><code class="highlight language-html">&lt;h2&gt;</code></dt>
+        <dd>The title.</dd>
+        <dt><code class="highlight language-html">&lt;section&gt;</code> <span class="badge-secondary">Optional</span></dt>
+        <dd>The description.</dd>
+      </dl>
+    </dd>
+  </dl>
+</section>
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-destructive"><a href="#example-destructive">Destructive</a></h3>
+
+{% set code %}<div class="alert-destructive">
+  {% lucide "circle-alert" %}
+  <h2>Something went wrong!</h2>
+  <section>Your session has expired. Please log in again.</section>
+</div>{% endset %}
+{{ code_preview("alert-destructive", code) }}
+
+<h3 id="example-no-description"><a href="#example-no-description">No description</a></h3>
+
+{% set code %}
+<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>{% endset %}
+{{ code_preview("alert-no-description", code) }}
+
+<h3 id="example-no-icon"><a href="#example-no-icon">No icon</a></h3>
+
+{% set code %}<div class="alert">
+  <h2>Success! Your changes have been saved</h2>
+  <section>This is an alert with title and description only.</section>
+</div>{% endset %}
+{{ code_preview("alert-no-icon", code) }}

package/docs/src/components/avatar.njk

@@ -0,0 +1,40 @@
+---
+layout: layouts/page.njk
+title: Avatar
+description: An image element with a fallback for representing the user.
+toc:
+  - label: Usage
+    id: usage
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+<div class="alert mb-6">
+  {% lucide "circle-alert" %}
+  <h2>There is no dedicated Avatar component in Basecoat.</h2>
+</div>
+
+{% set code %}
+<div class="flex flex-row flex-wrap items-center gap-12">
+  <img class="size-8 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="@shadcn" src="https://github.com/shadcn.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>
+{% endset %}
+{{ code_preview("avatar", code | prettyHtml, "w-full max-w-md") }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose">
+  <p>Avatars are just <code>&lt;img&gt;</code> elements styled with Tailwind utility classes.</p>
+</section>
+
+{% set code_simple %}
+  <img class="size-8 shrink-0 object-cover rounded-full" alt="@hunvreus" src="https://github.com/hunvreus.png">
+{% endset %}
+{{ code_block(code_simple | prettyHtml, "html") }}

package/docs/src/components/badge.njk

@@ -0,0 +1,93 @@
+---
+layout: layouts/page.njk
+title: Badge
+description: Displays a badge or a component that looks like a badge.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Primary
+        id: example-primary
+      - label: Secondary
+        id: example-secondary
+      - label: Destructive
+        id: example-destructive
+      - label: Outline
+        id: example-outline
+      - label: With icon
+        id: example-with-icon
+      - label: Link
+        id: example-link
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}
+<div class="flex flex-col items-center gap-2">
+  <div class="flex w-full flex-wrap gap-2">
+    <span class="badge">Badge</span>
+    <span class="badge-secondary">Secondary</span>
+    <span class="badge-destructive">Destructive</span>
+    <span class="badge-outline">Outline</span>
+  </div>
+  <div class="flex w-full flex-wrap gap-2">
+    <span class="badge-secondary bg-blue-500 text-white dark:bg-blue-600">
+      {% lucide "badge-check" %}
+      Verified
+    </span>
+    <span class="badge rounded-full h-5 min-w-5 px-1 font-mono tabular-nums">8</span>
+    <span class="badge-destructive rounded-full h-5 min-w-5 px-1 font-mono tabular-nums">99</span>
+    <span class="badge-outline rounded-full h-5 min-w-5 px-1 font-mono tabular-nums">20+</span>
+  </div>
+</div>
+{% endset %}
+{{ code_preview("badge", code) }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose">
+  <p>Use one of the badge classes: <code>badge</code>, <code>badge-primary</code>, <code>badge-secondary</code>, <code>badge-destructive</code> or <code>badge-outline</code>.
+</section>
+
+{{ code_block(code) }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-primary"><a href="#example-primary">Primary</a></h3>
+
+{% set code %}<span class="badge">Primary</span>{% endset %}
+{{ code_preview("badge-primary", code) }}
+
+<h3 id="example-secondary"><a href="#example-secondary">Secondary</a></h3>
+
+{% set code %}<span class="badge-secondary">Secondary</span>{% endset %}
+{{ code_preview("badge-secondary", code) }}
+
+<h3 id="example-destructive"><a href="#example-destructive">Destructive</a></h3>
+
+{% set code %}<span class="badge-destructive">Destructive</span>{% endset %}
+{{ code_preview("badge-destructive", code) }}
+
+<h3 id="example-outline"><a href="#example-outline">Outline</a></h3>
+
+{% set code %}<span class="badge-outline">Outline</span>{% endset %}
+{{ code_preview("badge-outline", code) }}
+
+<h3 id="example-with-icon"><a href="#example-with-icon">With icon</a></h3>
+
+{% set code %}<span class="badge-destructive">
+  {% lucide "circle-alert" %}
+  With icon
+</span>{% endset %}
+{{ code_preview("badge-with-icon", code) }}
+
+<h3 id="example-link"><a href="#example-link">Link</a></h3>
+
+{% set code %}<a href="#" class="badge-outline">
+  Link
+  {% lucide "arrow-right" %}
+</a>{% endset %}
+{{ code_preview("badge-link", code) }}

package/docs/src/components/breadcrumb.njk

@@ -0,0 +1,71 @@
+---
+layout: layouts/page.njk
+title: Breadcrumb
+description: Displays the path to the current resource using a hierarchy of links.
+toc:
+  - label: Usage
+    id: usage
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+{% from "dropdown-menu.njk" import dropdown_menu %}
+
+<div class="alert mb-6">
+  {% lucide "circle-alert" %}
+  <h2>There is no dedicated Breadcrumb component in Basecoat.</h2>
+</div>
+
+{% set code_html %}
+<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 %}
+    {% call 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"}
+    ) %}
+      <nav role="menu">
+        <button type="button" role="menuitem">Documentation</button>
+        <button type="button" role="menuitem">Themes</button>
+        <button type="button" role="menuitem">GitHub</button>
+      </nav>
+    {% endcall %}
+  </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>
+{% endset %}
+
+{{ code_preview("dropdown-menu", code_html | prettyHtml) }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose">
+  <p>You can style an ordered list of links combined with chevron icons as show below. The example above demonstrates a more complex use case using the <a href="/components/dropdown-menu">Dropdown Menu</a> component.</p>
+</section>
+
+{% set code_simple %}
+<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">
+    <a href="#" class="hover:text-foreground transition-colors">Components</a>
+  </li>
+</ol>
+{% endset %}
+{{ code_block(code_simple | prettyHtml, "html") }}