basecoat-cli 0.2.0-beta.1 → 0.2.1

package/dist/assets/jinja/sidebar.html.jinja

@@ -2,17 +2,21 @@
   Renders a sidebar component.
 
   @param id {string} [optional] - Unique identifier for the sidebar component.
-  @param label {string} [optional] [default="Sidebar navigation"] - Label for the sidebar navigation.
-  @param open {boolean} [optional] [default=True] - Whether the sidebar is open.
+  @param label {string} [optional] - Label for the sidebar navigation.
+  @param open {boolean} [optional] - Whether the sidebar is open.
   @param side {string} [optional] - Side of the sidebar to display.
   @param header {string} [optional] - Header content for the sidebar.
   @param footer {string} [optional] - Footer content for the sidebar.
   @param menu {array} [optional] - Array of menu items for the sidebar.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
+  @param header_attrs {object} [optional] - Additional HTML attributes for the header div.
+  @param content_attrs {object} [optional] - Additional HTML attributes for the content div.
+  @param footer_attrs {object} [optional] - Additional HTML attributes for the footer div.
 #}
 {% macro sidebar(
   id=None,
   label="Sidebar navigation",
-  open=True,
+  open=true,
   side=None,
   header=None,
   footer=None,
@@ -20,21 +24,17 @@
   main_attrs={},
   header_attrs={},
   content_attrs={},
-  footer_attrs={},
-  content_wrapper_attrs=None
+  footer_attrs={}
 ) %}
-<div
+<aside
   {% if id %}id="{{ id }}"{% endif %}
   class="sidebar {{ main_attrs.class }}"
-  data-uninitialized
   data-side="{{ side if side else "left" }}"
   aria-hidden="{{ "true" if not open else "false" }}"
   {{ "inert" if not open }}
   {% for key, value in main_attrs.items() %}
     {% if key != "class" %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
-  x-data="sidebar({{ "true" if open else "false" }})"
-  x-bind="$main"
 >
   <nav
     aria-label="{{ label }}"
@@ -71,7 +71,7 @@
     </footer>
     {% endif %}
   </nav>
-</div>
+</aside>
 {% endmacro %}
 
 {#
@@ -81,7 +81,7 @@
   @param parent_id_prefix {string} [optional] - Prefix for generating element IDs.
 #}
 {% macro render_sidebar_content(items, parent_id_prefix="content") %}
-  {% for item in items.items() %}
+  {% for item in items %}
     {% set item_id = parent_id_prefix ~ "-" ~ loop.index %}
 
     {% if item.type == "group" %}
@@ -89,15 +89,17 @@
       <div
         role="group"
         {% if item.label %}aria-labelledby="{{ group_label_id }}"{% endif %}
-        {% for key, value in item.attrs.items() %}
-          {{ key }}="{{ value }}"
-        {% endfor %}
+        {% if item.attrs %}
+          {% for key, value in item.attrs.items() %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
       >
         {% if item.label %}
           <h3 id="{{ group_label_id }}">{{ item.label }}</h3>
         {% endif %}
         <ul>
-          {{ render_sidebar_content(item.items, item_id) if item.items }}
+          {{ render_sidebar_content(item["items"], item_id) if item["items"] }}
         </ul>
       </div>
     {% elif item.type == "separator" %}
@@ -107,16 +109,18 @@
         <details
           id="submenu-{{ item_id }}"
           {{ "open" if item.open }}
-          {% for key, value in item.attrs.items() %}
-            {% if key != "open" %}{{ key }}="{{ value }}"{% endif %}
-          {% endfor %}
+          {% if item.attrs %}
+            {% for key, value in item.attrs.items() %}
+              {% if key != "open" %}{{ key }}="{{ value }}"{% endif %}
+            {% endfor %}
+          {% endif %}
         >
           <summary aria-controls="submenu-{{ item_id }}-content">
             {% if item.icon %}{{ item.icon | safe }}{% endif %}
             {{ item.label }}
           </summary>
           <ul id="submenu-{{ item_id }}-content">
-            {{ render_sidebar_content(item.items, item_id) if item.items }}
+            {{ render_sidebar_content(item["items"], item_id) if item["items"] }}
           </ul>
         </details>
       </li>
@@ -125,9 +129,11 @@
         <a
           href="{{ item.url }}"
           {{ 'aria-current="page"' if item.current }}
-          {% for key, value in item.attrs.items() %}
-            {% if key != "href" and key != "aria-current" %}{{ key }}="{{ value }}"{% endif %}
-          {% endfor %}
+          {% if item.attrs %}
+            {% for key, value in item.attrs.items() %}
+              {% if key != "href" and key != "aria-current" %}{{ key }}="{{ value }}"{% endif %}
+            {% endfor %}
+          {% endif %}
         >
           {% if item.icon %}{{ item.icon | safe }}{% endif %}
           <span>{{ item.label }}</span>

package/dist/assets/jinja/tabs.html.jinja

@@ -14,17 +14,17 @@
   @param default_tab_index {number} [optional] [default=1] - The 1-based index of the tab to be active initially.
 #}
 {% macro tabs(
-    id,
+    id=None,
     tabsets=[],
-    main_attrs=None,
-    tablist_attrs=None,
+    main_attrs={},
+    tablist_attrs={},
     default_tab_index=1
   )
 %}
+{% set id = id or ("tabs-" + (range(100000, 999999) | random | string)) %}
 <div
   class="tabs {{ main_attrs.class }}"
-  x-data="tabs({{ default_tab_index - 1 }})"
-  {% if id %}id="{{ id }}"{% endif %}
+  id="{{ id }}"
   {% for key, value in main_attrs.items() %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
@@ -32,40 +32,43 @@
   <nav
     role="tablist"
     aria-orientation="horizontal"
-    x-bind="$tablist"
     {% for key, value in tablist_attrs.items() %}
       {{ key }}="{{ value }}"
     {% endfor %}
   >
-    {% for tabset in tabsets.items() %}
+    {% for tabset in tabsets %}
       <button
         type="button"
         role="tab"
-        id="{{ tabset.id }}-tab-{{ loop.index }}"
-        aria-controls="{{ tabset.id }}-panel-{{ loop.index }}"
+        id="{{ id }}-tab-{{ loop.index }}"
+        aria-controls="{{ id }}-panel-{{ loop.index }}"
         aria-selected="{{ 'true' if loop.index == default_tab_index else 'false' }}"
         tabindex="0"
-        {% for key, value in tabset.tab_attrs.items() %}
-          {{ key }}="{{ value }}"
-        {% endfor %}
+        {% if tabset.tab_attrs %}
+          {% for key, value in tabset.tab_attrs.items() %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
       >
         {{ tabset.tab | safe }}
       </button>
     {% endfor %}
   </nav>
 
-  {% for tabset in tabsets.items() %}
+  {% for tabset in tabsets %}
     {% if tabset.panel %}
       <div
         role="tabpanel"
-        id="{{ tabset.id }}-panel-{{ loop.index }}"
-        aria-labelledby="{{ tabset.id }}-tab-{{ loop.index }}"
+        id="{{ id }}-panel-{{ loop.index }}"
+        aria-labelledby="{{ id }}-tab-{{ loop.index }}"
         tabindex="-1"
         aria-selected="{{ 'true' if loop.index == default_tab_index else 'false' }}"
         {% if loop.index != default_tab_index %}hidden{% endif %}
-        {% for key, value in tabset.panel_attrs.items() %}
-          {{ key }}="{{ value }}"
-        {% endfor %}
+        {% if tabset.panel_attrs %}
+          {% for key, value in tabset.panel_attrs.items() %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
       >
         {{ tabset.panel | safe }}
       </div>

package/dist/assets/jinja/toast.html.jinja

@@ -5,21 +5,19 @@
   @param id {string} [optional] [default="toaster"] - Unique identifier for the toaster container.
   @param toasts {array} [optional] - An array of toast objects to render initially. See the <code>toast()</code> macro for more details.
   @param main_attrs {object} [optional] - Additional HTML attributes for the main toaster container div.
-  @param is_fragment {boolean} [optional] [default=False] - If True, renders only the toast elements with hx-swap-oob="beforeend", suitable for htmx responses. Skips script and template inclusion.
+  @param is_fragment {boolean} [optional] [default=false] - If true, renders only the toast elements with hx-swap-oob="beforeend", suitable for htmx responses. Skips script and template inclusion.
 #}
 {% macro toaster(
   id="toaster",
   toasts=[],
-  main_attrs={},
-  is_fragment=False
+  attrs={}
 ) %}
 <div
   id="{{ id }}"
-  class="toaster"
-  {% for key, value in main_attrs.items() %}
-    {{ key }}="{{ value }}"
+  class="toaster {{ attrs.class }}"
+  {% for key, value in attrs.items() %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
-  {% if is_fragment %}hx-swap-oob="beforeend"{% endif %}
 >
 {% for item in toasts %}
   {{ toast(
@@ -31,79 +29,6 @@
   ) }}
 {% endfor %}
 </div>
-
-{% if not is_fragment %}
-<template id="toast-template">
-  <div
-    class="toast"
-    role="status"
-    aria-atomic="true"
-    x-bind="$toastBindings"
-  >
-    <div class="toast-content">
-      <div class="flex items-center justify-between gap-x-3 p-4 [&>svg]:size-4 [&>svg]:shrink-0 [&>[role=img]]:size-4 [&>[role=img]]:shrink-0 [&>[role=img]>svg]:size-4">
-        <template x-if="config.icon">
-          <span aria-hidden="true" role="img" x-html="config.icon"></span>
-        </template>
-        <template x-if="!config.icon && config.category === 'success'">
-          {{ toast_icons.success | safe }}
-        </template>
-        <template x-if="!config.icon && config.category === 'error'">
-          {{ toast_icons.error | safe }}
-        </template>
-        <template x-if="!config.icon && config.category === 'info'">
-          {{ toast_icons.info | safe }}
-        </template>
-        <template x-if="!config.icon && config.category === 'warning'">
-          {{ toast_icons.warning | safe }}
-        </template>
-        <section class="flex-1 flex flex-col gap-0.5 items-start">
-          <template x-if="config.title">
-            <h2 class="font-medium" x-text="config.title"></h2>
-          </template>
-          <template x-if="config.description">
-            <p class="text-muted-foreground" x-text="config.description"></p>
-          </template>
-        </section>
-        <template x-if="config.action || config.cancel">
-          <footer class="flex flex-col gap-1 self-start">
-            <template x-if="config.action?.click">
-              <button
-                type="button"
-                class="btn h-6 text-xs px-2.5 rounded-sm"
-                @click="executeAction(config.action.click)"
-                x-text="config.action.label"
-              ></button>
-            </template>
-            <template x-if="config.action?.url">
-              <a
-                :href="config.action.url"
-                class="btn h-6 text-xs px-2.5 rounded-sm"
-                x-text="config.action.label"
-              ></a>
-            </template>
-            <template x-if="config.cancel?.click">
-              <button
-                type="button"
-                class="btn-outline h-6 text-xs px-2.5 rounded-sm"
-                @click="executeAction(config.cancel.click)"
-                x-text="config.cancel.label"
-              ></button>
-            </template>
-            <template x-if="config.cancel?.url">
-              <a
-                :href="config.cancel.url"
-                class="btn-outline h-6 text-xs px-2.5 rounded-sm"
-                x-text="config.cancel.label"
-              ></a>
-            </template>
-          </footer>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-{% endif %}
 {% endmacro %}
 
 {#
@@ -134,65 +59,51 @@
   aria-atomic="true"
   aria-hidden="false"
   {% if category %}data-category="{{ category }}"{% endif %}
-  x-data="toast({
-    category: '{{ category }}',
-    duration: {{ duration or 'null' }}
-  })"
-  x-bind="$toastBindings"
 >
   <div class="toast-content">
-    <div class="flex items-center justify-between gap-x-3 p-4 [&>svg]:size-4 [&>svg]:shrink-0 [&>[role=img]]:size-4 [&>[role=img]]:shrink-0 [&>[role=img]>svg]:size-4">
-      {% if category in ["error", "success", "info", "warning"] %}
-        {{ toast_icons[category] | safe }}
+    {% if category in ["error", "success", "info", "warning"] %}
+      {% if category == "success" %}
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
+      {% elif category == "error" %}
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
+      {% elif category == "info" %}
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+      {% elif category == "warning" %}
+        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
       {% endif %}
-      <section class="flex-1 flex flex-col gap-0.5 items-start">
-        {% if title %}
-          <h2 class="font-medium">{{ title }}</h2>
+    {% endif %}
+    <section>
+      {% if title %}<h2>{{ title }}</h2>{% endif %}
+      {% if description %}<p>{{ description }}</p>{% endif %}
+    </section>
+    {% if action or cancel %}
+      <footer>
+        {% if action %}
+          {% if action.href %}
+            <a
+              href="{{ action.href }}"
+              class="btn-sm"
+              data-toast-action
+            >{{ action.label }}</a>
+          {% else %}
+            <button
+              type="button"
+              class="btn"
+              data-toast-action
+              {% if action.onclick %}onclick="{{ action.onclick }}"{% endif %}
+            >{{ action.label }}</button>
+          {% endif %}
         {% endif %}
-        {% if description %}
-          <p class="text-muted-foreground">{{ description }}</p>
+        {% if cancel %}
+          <button
+            type="button"
+            class="btn-sm-outline"
+            data-toast-cancel
+            {% if cancel.onclick %}onclick="{{ cancel.onclick }}"{% endif %}
+          >{{ cancel.label }}</button>
         {% endif %}
-      </section>
-      {% if action or cancel %}
-        <footer class="flex flex-col gap-1 self-start">
-          {% if action %}
-            {% if action.click %}
-              <button
-                type="button"
-                class="btn h-6 text-xs px-2.5 rounded-sm"
-                @click="{{ action.click }}"
-              >{{ action.label }}</button>
-            {% elif action.url %}
-              <a
-                href="{{ action.url }}"
-                class="btn h-6 text-xs px-2.5 rounded-sm"
-              >{{ action.label }}</a>
-            {% endif %}
-          {% endif %}
-          {% if cancel %}
-            {% if cancel.click %}
-              <button
-                type="button"
-                class="btn-outline h-6 text-xs px-2.5 rounded-sm"
-                @click="{{ cancel.click }}"
-              >{{ cancel.label }}</button>
-            {% elif cancel.url %}
-              <a
-                href="{{ cancel.url }}"
-                class="btn-outline h-6 text-xs px-2.5 rounded-sm"
-              >{{ toast.cancel.label }}</a>
-            {% endif %}
-          {% endif %}
-        </footer>
-      {% endif %}
-    </div>
+      </footer>
+    {% endif %}
   </div>
 </div>
-{% endmacro %}
-
-{% set toast_icons = {
-  'success': '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-icon lucide-circle-check"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>',
-  'error': '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-x-icon lucide-circle-x"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>',
-  'info': '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info-icon lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',
-  'warning': '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert-icon lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>'
-} %}
+{% endmacro %}