@pokle/basecoat 0.3.10-beta2.pokle

package/docs/src/components/sidebar.njk

@@ -0,0 +1,219 @@
+---
+layout: layouts/page.njk
+title: Sidebar
+description: A composable, themeable and customizable sidebar component.
+toc:
+  - label: Usage
+    id: usage
+    children:
+      - label: HTML + JavaScript
+        id: usage-html-js
+        children:
+          - label: "Step 1: Include the JavaScript files"
+            id: usage-html-js-1
+          - label: "Step 2: Add your sidebar HTML"
+            id: usage-html-js-2
+          - label: HTML structure
+            id: usage-html-js-3
+          - label: JavaScript events
+            id: usage-html-js-4
+      - label: Jinja and Nunjucks
+        id: usage-macro
+---
+
+{% from "macros/code_block.njk" import code_block %}
+{% from "sidebar.njk" import sidebar %}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<h3 id="usage-html-js"><a href="#usage-html-js">HTML + JavaScript</a></h3>
+
+<h4 id="usage-html-js-1"><a href="#usage-html-js-1">Step 1: Include the JavaScript files</a></h4>
+
+<section class="prose">
+  <p>You can either <a href="/installation/#install-cdn-all">include the JavaScript file for all the components</a>, or just the one for this component by adding this to the <code>&lt;head&gt;</code> of your page:</p>
+</section>
+
+{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/basecoat.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/sidebar.min.js" defer></script>{% endset %}
+{{ code_block(code_script | prettyHtml, "html") }}
+
+<div class="flex flex-wrap gap-2 my-6">
+  <a class="badge-outline" href="/installation/#install-js">
+    Components with JavaScript
+    {% lucide "arrow-right" %}
+  </a>
+  <a class="badge-outline" href="/installation/#install-cli">
+    Use the CLI
+    {% lucide "arrow-right" %}
+  </a>
+  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/sidebar.js" target="_blank">
+    sidebar.js
+    {% lucide "arrow-right" %}
+  </a>
+</div>
+
+<h4 id="usage-html-js-2"><a href="#usage-html-js-2">Step 2: Add your sidebar HTML</a></h4>
+
+{% set code_html %}
+{% set icon_square_terminal %}{% lucide "square-terminal" %}{% endset %}
+{% set icon_bot %}{% lucide "bot" %}{% endset %}
+{% set icon_settings %}{% lucide "settings" %}{% endset %}
+{% set menu = [
+  { type: "group", label: "Getting started", items: [
+    { label: "Playground", url: "#", icon: icon_square_terminal },
+    { label: "Models", url: "#", icon: icon_bot },
+    { label: "Settings", type: "submenu", icon: icon_settings, items: [
+      { label: "General", url: "#" },
+      { label: "Team", url: "#" },
+      { label: "Billing", url: "#" },
+      { label: "Limits", url: "#" }
+    ] }
+  ]}
+] %}
+{{ sidebar(
+  label="Sidebar navigation",
+  content_attrs={
+    "class": "scrollbar"
+  },
+  menu=menu
+) }}
+<main>
+  <button type="button" onclick="document.dispatchEvent(new CustomEvent('basecoat:sidebar'))">Toggle sidebar</button>
+  <h1>Content</h1>
+</main>
+{% endset %}
+{{ code_block(code_html | prettyHtml, "html") }}
+
+<h4 id="usage-html-js-3"><a href="#usage-html-js-3">HTML structure</a></h4>
+
+<section class="prose">
+  <dl>
+    <dt><code class="highlight language-html">&lt;aside class="sidebar" aria-hidden="false"&gt;</code></dt>
+    <dd>Wraps around the entire component. It can have the following attributes:
+      <ul>
+        <li><code>aria-hidden="true"</code>: controls the default state of the sidebar (hidden or visible).</li>
+        <li><code>data-side="left"</code>: specifies the side of the sidebar (<code>left</code> or <code>right</code>, defaults to <code>left</code>).</li>
+      </ul>
+    </dd>
+      <dl>
+        <dt><code class="highlight language-html">&lt;nav&gt;</code></dt>
+        <dd>
+          <p>The navigation element that contains the sidebar's content. It can have the following attributes:</p>
+          <ul>
+            <li><code>id="{BUTTON_ID}"</code>: linked to by the <code>aria-labelledby</code> attribute of the listbox.</li>
+            <li><code>aria-haspopup="menu"</code>: indicates that the button opens a menu.</li>
+            <li><code>aria-controls="{ MENU_ID }"</code>: points to the menu's id.</li>
+            <li><code>aria-expanded="false"</code>: tracks the popover's state.</li>
+          </ul>
+          <dl>
+            <dt><code class="highlight language-html">&lt;header&gt;</code> <span class="badge-secondary">Optional</span></dt>
+            <dd>The header of the sidebar.</dd>
+            <dt><code class="highlight language-html">&lt;section&gt;</code></dt>
+            <dd>The main navigation list.
+              <dl>
+                <dt><code class="highlight language-html">&lt;div role="group"&gt;</code></dt>
+                <dd>Group of options, can have a <code>aria-labelledby</code> attribute to link to a heading.</dd>
+                <dt><code class="highlight language-html">&lt;span role="heading"&gt;</code></dt>
+                <dd>Group heading, must have an <code>id</code> attribute if you use the <code>aria-labelledby</code> attribute on the group.</dd>
+                <dt><code class="highlight language-html">&lt;ul&gt;</code></dt>
+                <dd>List of links or buttons.
+                  <dl>
+                    <dt><code class="highlight language-html">&lt;li&gt;</code></dt>
+                    <dd>Individual item.
+                      <dl>
+                        <dt><code class="highlight language-html">&lt;a&gt;</code></dt>
+                        <dd>A link. By default, clicking on a link will close the sidebar on mobile unless the <code>data-keep-mobile-sidebar-open</code> attribute is present.</dd>
+                        <dt><code class="highlight language-html">&lt;button&gt;</code></dt>
+                        <dd>A button. By default, clicking on a button will close the sidebar on mobile unless the <code>data-keep-mobile-sidebar-open</code> attribute is present.</dd>
+                        <dt><code class="highlight language-html">&lt;details&gt;</code></dt>
+                        <dd>Collapsible section.
+                          <dl>
+                            <dt><code class="highlight language-html">&lt;summary&gt;</code></dt>
+                            <dd>Summary of the collapsible section.</dd>
+                            <dt><code class="highlight language-html">&lt;ul&gt;</code></dt>
+                            <dd>List of links or buttons.</dd>
+                          </dl>
+                        </dd>
+                      </dl>
+                    </dd>
+                  </dl>
+                </dd>
+              </dl>
+            </dd>
+            <dt><code class="highlight language-html">&lt;footer&gt;</code> <span class="badge-secondary">Optional</span></dt>
+            <dd>The footer of the sidebar.</dd>
+          </dl>
+        </dd>
+      </dl>
+    </dd>
+    <dt><code class="highlight language-html">&lt;main&gt;</code></dt>
+    <dd>A wrapper for the content of the page.</dd>
+    <dt><code class="highlight language-html">&lt;button type="button" onclick="document.dispatchEvent(new CustomEvent('basecoat:sidebar'))"&gt;</code></dt>
+    <dd>A button to toggle the sidebar. If you want to use multiple sidebars you will need to add unique ids to the sidebars (i.e. <code>&lt;aside class="sidebar" id="{SIDEBAR_ID}"&gt;</code>) and refer to them in the event <code>detail</code> (i.e. <code>document.dispatchEvent(new CustomEvent('basecoat:sidebar', { detail: { id: '{SIDEBAR_ID}' } }));</code>).</dd>
+  </dl>
+</section>
+
+<h4 id="usage-html-js-4"><a href="#usage-html-js-4">JavaScript events</a></h4>
+
+<section class="prose">
+  <dl>
+    <dt><code>basecoat:initialized</code></dt>
+    <dd>Once the component is fully initialized, it dispatches a custom (non-bubbling) <code>basecoat:initialized</code> event on itself.</dd>
+    <dt><code>basecoat:sidebar</code></dt>
+    <dd>
+      <p>Sidebars listen for this event on <code>document</code> to open, close or toggle themselves. By default, the event will toggle the sidebar, but can be used to open or close if you add an <code>action</code> to the detail. Additionally, if you have multiple sidebars on the page, you can target a specific sidebar by adding its <code>id</code> to the detail:</p>
+        {% set code_trigger %}<!-- Toggles the sidebar -->
+<button type="button" onclick="document.dispatchEvent(new CustomEvent('basecoat:sidebar'));">Toggle sidebar</button>
+<!-- Opens the `#main-navigation` sidebar -->
+<button type="button" onclick="document.dispatchEvent(new CustomEvent('basecoat:sidebar', { detail: { id: 'main-navigation', action: 'open' } }));">Open sidebar</button>
+<!-- Closes the sidebar -->
+<button type="button" onclick="document.dispatchEvent(new CustomEvent('basecoat:sidebar', { detail: { action: 'close' } }));">Close sidebar</button>{% endset %}
+        {{ code_block(code_trigger | prettyHtml, "html") }}
+    </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">sidebar()</code> Nunjucks or Jinja macro for this component.</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/sidebar.html.jinja" target="_blank">
+    Jinja macro
+    {% lucide "arrow-right" %}
+  </a>
+  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/sidebar.njk" target="_blank">
+    Nunjucks macro
+    {% lucide "arrow-right" %}
+  </a>
+</div>
+
+{% set raw_code %}{% raw %}{% set menu = [
+  { type: "group", label: "Getting started", items: [
+    { label: "Playground", url: "#" },
+    { label: "Models", url: "#" },
+    { label: "Settings", type: "submenu", items: [
+      { label: "General", url: "#" },
+      { label: "Team", url: "#" },
+      { label: "Billing", url: "#" },
+      { label: "Limits", url: "#" }
+    ] }
+  ]}
+] %}
+
+{{ sidebar(
+  label="Sidebar navigation",
+  menu=menu
+) }}
+<main>
+  <h1>Content</h1>
+</main>
+{% endraw %}{% endset%}
+{{ code_block(raw_code, "jinja") }}

package/docs/src/components/skeleton.njk

@@ -0,0 +1,51 @@
+---
+layout: layouts/page.njk
+title: Skeleton
+description: Used to show a placeholder while content is loading.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Card
+        id: example-card
+---
+
+{% 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 skeleton component in Basecoat.</h2>
+</div>
+
+{% set code %}<div class="flex items-center gap-4">
+  <div class="bg-accent animate-pulse size-10 shrink-0 rounded-full"></div>
+  <div class="grid gap-2">
+    <div class="bg-accent animate-pulse rounded-md h-4 w-[150px]"></div>
+    <div class="bg-accent animate-pulse rounded-md h-4 w-[100px]"></div>
+  </div>
+</div>{% endset %}
+{{ code_preview("skeleton", code | prettyHtml) }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<p class="prose">Simply use the <code>animate-pulse</code> class to create a skeleton.</p>
+
+{{ code_block(code) }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-card"><a href="#example-card">Card</a></h3>
+
+{% set code %}<div class="card w-full @md:w-auto @md:min-w-sm">
+  <header>
+    <div class="bg-accent animate-pulse rounded-md h-4 w-2/3"></div>
+    <div class="bg-accent animate-pulse rounded-md h-4 w-1/2"></div>
+  </header>
+  <section>
+    <div class="bg-accent animate-pulse rounded-md aspect-square w-full"></div>
+  </section>
+</div>{% endset %}
+{{ code_preview("skeleton-card", code | prettyHtml, "w-full max-w-md") }}

package/docs/src/components/slider.njk

@@ -0,0 +1,47 @@
+---
+layout: layouts/page.njk
+title: Slider
+description: An input where the user selects a value from within a given range.
+toc:
+  - label: Usage
+    id: usage
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}<input
+  type="range"
+  class="input w-full"
+  min="0"
+  max="100"
+  value="50"
+>
+<script>
+  (() => {
+    const sliders = document.querySelectorAll('input[type="range"].input');
+    if (!sliders) return;
+
+    const updateSlider = (el) => {
+      const min = parseFloat(el.min || 0);
+      const max = parseFloat(el.max || 100);
+      const value = parseFloat(el.value);
+      const percent = (max === min) ? 0 : ((value - min) / (max - min)) * 100;
+      el.style.setProperty('--slider-value', `${percent}%`);
+    };
+
+    sliders.forEach(slider => {
+      updateSlider(slider);
+      slider.addEventListener('input', (event) => updateSlider(event.target));
+    });
+  })();
+</script>{% endset %}
+{{ code_preview("slider", code, "w-full max-w-sm") }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose">
+  <p>You can style an <code>&lt;input type="range"&gt;</code> element by either adding the <code>input</code> class or having a parent with the <code>form</code> class (<a href="/components/form">read more about form</a>). However, the range input also requries some Javacript code to be able to paint the left side of the slider.</p>
+</section>
+
+{{ code_block(code) }}

package/docs/src/components/spinner.njk

@@ -0,0 +1,214 @@
+---
+layout: layouts/page.njk
+title: Spinner
+description: An indicator that can be used to show a loading state.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Size
+        id: example-size
+      - label: Color
+        id: example-color
+      - label: Button
+        id: example-button
+      - label: Badge
+        id: example-badge
+      - label: Input Group
+        id: example-input-group
+      - label: Empty
+        id: example-empty
+      - label: Item
+        id: example-item
+---
+
+{% 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 Spinner component in Basecoat.</h2>
+</div>
+
+{% set code_default %}
+<article class="group/item flex items-center border text-sm rounded-md transition-colors flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-transparent bg-muted/50 p-4 gap-4">
+  <div class="flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:size-4">
+    {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
+  </div>
+  <div class="flex flex-1 flex-col gap-1">
+    <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium line-clamp-1">Processing payment...</h3>
+  </div>
+  <div class="flex flex-col gap-1 flex-none text-center">
+    <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">$100.00</p>
+  </div>
+</article>
+{% endset %}
+
+{{ code_preview("spinner-default", code_default, class="w-full max-w-xs") }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose">
+  <p>Spinners are pure HTML using the <code>loader-circle</code> Lucide icon with the <code>animate-spin</code> Tailwind utility. Add <code>role="status"</code> and <code>aria-label="Loading"</code> for accessibility.</p>
+  <p>Browse the examples below and copy the pattern that fits your needs.</p>
+</section>
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-size"><a href="#example-size">Size</a></h3>
+
+<section class="prose">
+  <p>Use the <code>size-*</code> utility class to change the size of the spinner.</p>
+</section>
+
+{% set code_size %}
+<div class="flex items-center gap-6">
+  {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-3 animate-spin" } %}
+  {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-4 animate-spin" } %}
+  {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin" } %}
+  {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-8 animate-spin" } %}
+</div>
+{% endset %}
+
+{{ code_preview("spinner-size", code_size) }}
+
+<h3 id="example-color"><a href="#example-color">Color</a></h3>
+
+<section class="prose">
+  <p>Use the <code>text-*</code> utility class to change the color of the spinner.</p>
+</section>
+
+{% set code_color %}
+<div class="flex items-center gap-6">
+  {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin text-red-500" } %}
+  {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin text-green-500" } %}
+  {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin text-blue-500" } %}
+  {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin text-yellow-500" } %}
+  {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-6 animate-spin text-purple-500" } %}
+</div>
+{% endset %}
+
+{{ code_preview("spinner-color", code_color) }}
+
+<h3 id="example-button"><a href="#example-button">Button</a></h3>
+
+<section class="prose">
+  <p>Add a spinner to a button to indicate a loading state.</p>
+</section>
+
+{% set code_button %}
+<div class="flex flex-col items-center gap-4">
+  <button class="btn-sm" disabled>
+    {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
+    Loading...
+  </button>
+  <button class="btn-sm-outline" disabled>
+    {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
+    Please wait
+  </button>
+  <button class="btn-sm-secondary" disabled>
+    {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
+    Processing
+  </button>
+</div>
+{% endset %}
+
+{{ code_preview("spinner-button", code_button) }}
+
+<h3 id="example-badge"><a href="#example-badge">Badge</a></h3>
+
+{% set code_badge %}
+<div class="flex items-center gap-4">
+  <span class="badge">
+    {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
+    Syncing
+  </span>
+  <span class="badge-secondary">
+    {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
+    Updating
+  </span>
+  <span class="badge-outline">
+    {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
+    Processing
+  </span>
+</div>
+{% endset %}
+
+{{ code_preview("spinner-badge", code_badge) }}
+
+<h3 id="example-input-group"><a href="#example-input-group">Input Group</a></h3>
+
+<section class="prose">
+  <p>Input groups can have spinners positioned inside them.</p>
+</section>
+
+{% set code_input_group %}
+<div class="flex w-full max-w-md flex-col gap-4">
+  <div class="relative">
+    <input type="text" class="input pr-9" placeholder="Send a message..." disabled>
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4">
+      {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin" } %}
+    </div>
+  </div>
+
+  <div class="relative">
+    <textarea class="textarea pr-10 min-h-27 pb-12" placeholder="Send a message..." disabled></textarea>
+    <footer role="group" class="absolute bottom-0 px-3 pb-3 pt-1.5 flex items-center w-full gap-2">
+      {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "size-4 animate-spin text-muted-foreground" } %}
+      <span class="text-sm text-muted-foreground">Validating...</span>
+      <button type="button" class="btn-sm-icon h-6 w-7.5 ml-auto rounded">
+        {% lucide "arrow-up" %}
+      </button>
+    </footer>
+  </div>
+</div>
+{% endset %}
+
+{{ code_preview("spinner-input-group", code_input_group, class="w-full max-w-md") }}
+
+<h3 id="example-empty"><a href="#example-empty">Empty</a></h3>
+
+<section class="prose">
+  <p>Use a spinner in empty states to indicate a loading or processing state.</p>
+</section>
+
+{% set code_empty %}
+<div class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg p-6 text-center text-balance md:p-12 text-neutral-800 dark:text-neutral-300">
+  <header class="flex max-w-sm flex-col items-center gap-3 text-center">
+    <div class="mb-2 bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6">
+      {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin size-4" } %}
+    </div>
+    <h3 class="text-lg font-semibold tracking-tight">Processing your request</h3>
+    <p class="text-muted-foreground text-sm/relaxed">Please wait while we process your request. Do not refresh the page.</p>
+  </header>
+  <section class="flex w-full max-w-sm min-w-0 flex-col items-center gap-3">
+    <button class="btn-sm-outline">Cancel</button>
+  </section>
+</div>
+{% endset %}
+
+{{ code_preview("spinner-empty", code_empty) }}
+
+<h3 id="example-item"><a href="#example-item">Item</a></h3>
+
+{% set code_item %}
+<article class="group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border-border p-4 gap-4">
+  <div class="flex shrink-0 items-center justify-center gap-2 self-start [&_svg]:pointer-events-none size-8 border rounded-md bg-muted [&_svg:not([class*='size-'])]:size-4">
+    {% lucide "loader-circle", { "role": "status", "aria-label": "Loading", "class": "animate-spin size-4 text-muted-foreground" } %}
+  </div>
+  <div class="flex flex-1 flex-col gap-1">
+    <h3 class="flex w-fit items-center gap-2 text-sm leading-snug font-medium">Downloading...</h3>
+    <p class="text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4">129 MB / 1000 MB</p>
+  </div>
+  <button class="btn-sm-outline self-start">Cancel</button>
+  <footer class="flex basis-full items-center justify-between gap-2">
+    <div class="bg-primary/20 relative h-2 w-full overflow-hidden rounded-full">
+      <div id="demo-progress" class="bg-primary h-full w-full flex-1 transition-all" style="width: 13%"></div>
+    </div>
+  </footer>
+</article>
+{% endset %}
+
+{{ code_preview("spinner-item", code_item, class="w-full max-w-md") }}

package/docs/src/components/switch.njk

@@ -0,0 +1,54 @@
+---
+layout: layouts/page.njk
+title: Switch
+description: A control that allows the user to toggle between checked and not checked.
+toc:
+  - label: Usage
+    id: usage
+  - label: Examples
+    id: examples
+    children:
+      - label: Form
+        id: example-form
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code %}<label class="label">
+  <input type="checkbox" name="switch" role="switch" class="input">
+  Airplane Mode
+</label>{% endset %}
+{{ code_preview("switch", code) }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose">
+  <p>You can style a <code>&lt;input type="checkbox"&gt;</code> element as a switch by adding a <code>role="switch"</code> attribute, and adding the <code>input</code> class or having a parent with the <code>form</code> class (<a href="/components/form">read more about form</a>).</p>
+</section>
+
+{% set code %}<input type="checkbox" role="switch" class="input">{% endset %}
+{{ code_block(code) }}
+
+<h2 id="examples"><a href="#examples">Examples</a></h2>
+
+<h3 id="example-form"><a href="#example-form">Form</a></h3>
+
+{% set code %}<form class="form grid gap-4">
+  <h3 class="text-lg font-medium">Email Notifications</h3>
+  <div class="gap-2 flex flex-row items-start justify-between rounded-lg border p-4 shadow-xs">
+    <div class="flex flex-col gap-0.5">
+      <label for="demo-form-switch" class="leading-normal">Marketing emails</label>
+      <p class="text-muted-foreground text-sm">Receive emails about new products, features, and more.</p>
+    </div>
+    <input type="checkbox" id="demo-form-switch" role="switch">
+  </div>
+  <div class="gap-2 flex flex-row items-start justify-between rounded-lg border p-4 shadow-xs">
+    <div class="flex flex-col gap-0.5 opacity-60">
+      <label for="demo-form-switch-disabled" class="leading-normal">Marketing emails</label>
+      <p class="text-muted-foreground text-sm">Receive emails about new products, features, and more.</p>
+    </div>
+    <input type="checkbox" id="demo-form-switch-disabled" role="switch" disabled>
+  </div>
+</form>{% endset %}
+{{ code_preview("switch-form", code, "w-full") }}