basecoat-cli 0.1.0

package/dist/assets/nunjucks/dialog.njk

@@ -0,0 +1,110 @@
+{#
+  Renders a dialog component with optional trigger, header, body, and footer.
+
+  @param id {string} - Unique identifier for the dialog component.
+  @param trigger {string} [optional] - Text or HTML for the button that triggers the dialog.
+  @param title {string} [optional] - Title text displayed in the dialog header.
+  @param description {string} [optional] - Description text displayed below the title.
+  @param footer {string} [optional] - HTML content for the dialog footer.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
+  @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
+  @param content_attrs {object} [optional] - Additional HTML attributes for the dialog content article.
+  @param content_header_attrs {object} [optional] - Additional HTML attributes for the dialog header.
+  @param content_body_attrs {object} [optional] - Additional HTML attributes for the dialog body section.
+  @param content_footer_attrs {object} [optional] - Additional HTML attributes for the dialog footer.
+  @param open {boolean} [optional] [default=false] - Whether the dialog should be open initially.
+  @param close_button {boolean} [optional] [default=true] - Whether to include a close button.
+  @param close_on_overlay_click {boolean} [optional] [default=true] - Whether clicking the overlay closes the dialog.
+#}
+{% macro dialog(
+  id,
+  trigger=None,
+  title=None,
+  description=None,
+  footer=None,
+  main_attrs={},
+  trigger_attrs={},
+  content_attrs={},
+  content_header_attrs={},
+  content_body_attrs={},
+  content_footer_attrs={},
+  open=false,
+  close_button=true,
+  close_on_overlay_click=true
+) %}
+<div
+  id="{{ id }}"
+  x-data="dialog({{ 'true' if open else 'false' }}, {{ 'true' if close_on_overlay_click else 'false' }})"
+  x-bind="$main"
+  class="dialog"
+  {% for key, value in main_attrs %}
+    {{ key }}="{{ value }}"
+  {% endfor %}
+>
+  {% if trigger %}
+  <button
+    type="button"
+    aria-expanded="false"
+    aria-controls="{{ id }}-dialog"
+    x-bind="$trigger"
+    {% for key, value in trigger_attrs %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    {{ trigger }} 
+  </button>
+  {% endif %}
+  <div
+    role="dialog"
+    id="{{ id }}-dialog"
+    tabindex="-1"
+    aria-modal="true"
+    aria-labelledby="{{ id }}-title"
+    inert
+    x-bind="$content"
+  >
+    <article
+      {% for key, value in content_attrs %}
+        {{ key }}="{{ value }}"
+      {% endfor %}
+    >
+      {% if title or description %}
+        <header
+          {% for key, value in content_header_attrs %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        >
+          <h2 id="{{ id }}-title">{{ title | safe }}</h2>
+          <p>{{ description | safe }}</p>
+        </header>
+      {% endif %}
+      {% if caller %}
+        <section
+          {% for key, value in content_body_attrs %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        >
+          {{ caller() }}
+        </section>
+      {% endif %}
+      {% if footer %}
+        <footer
+          {% for key, value in content_footer_attrs %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        >
+          {{ footer | safe }}
+        </footer>
+      {% endif %}
+      {% if close_button %}
+        <button
+          @click="hide()"
+          aria-label="Close dialog"
+        >
+          <svg 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-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+        </button>
+      {% endif %}
+    </article>
+  </div>
+</div>
+{% endmacro %}

package/dist/assets/nunjucks/dropdown-menu.njk

@@ -0,0 +1,113 @@
+{#
+  Renders a dropdown menu component.
+
+  @param id {string} [optional] - Unique identifier for the dropdown component.
+  @param trigger {string} [optional] - HTML content for the button that triggers the dropdown.
+  @param menu {array} [optional] - Array of menu items for the dropdown.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
+  @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
+  @param content_attrs {object} [optional] - Additional HTML attributes for the dropdown content div.
+#}
+{% macro dropdown_menu(
+  id=None,
+  trigger=None,
+  menu=None,
+  main_attrs={},
+  trigger_attrs={},
+  content_attrs={}
+) %}
+<div
+  class="popover {{ main_attrs.class }}"
+  x-data="dropdownMenu"
+  @click.away="open = false"
+  {% if id %}id="{{ id }}"{% endif %}
+  {% for key, value in main_attrs %}
+    {% if key != "class" %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  {% if trigger %}
+  <button
+    type="button"
+    aria-haspopup="menu"
+    aria-expanded="false"
+    x-bind="$trigger"
+    {% if id %}
+    id="{{ id }}-trigger"
+    aria-controls="{{ id }}-menu"
+    {% endif %}
+    {% for key, value in trigger_attrs %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    {{ trigger | safe }}
+  </button>
+  {% endif %}
+  <div
+    data-popover
+    aria-hidden="true"
+    x-bind="$content"
+    {% if id %}id="{{ id }}-menu"{% endif %}
+    {% for key, value in content_attrs %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    <nav role="menu">
+      {% if menu %}
+        {{ render_dropdown_items(menu, id ~ "-items" if id else "items") }}
+      {% else %}
+        {{ caller() if caller }}
+      {% endif %}
+    </nav>
+  </div>
+</div>
+{% endmacro %}
+
+{#
+  Renders dropdown menu items recursively.
+
+  @param items {array} - The array of items to render.
+  @param parent_id_prefix {string} [optional] - Prefix for generating element IDs.
+#}
+{% macro render_dropdown_items(items, parent_id_prefix="items") %}
+  {% for item in items %}
+    {% set item_id = parent_id_prefix ~ "-" ~ loop.index %}
+
+    {% if item.type == "group" %}
+      {% set group_label_id = item.id if item.id else "group-label-" + item_id %}
+      <div
+        role="group"
+        aria-labelledby="{{ group_label_id }}"
+        {% for key, value in item.attrs %}
+          {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+        <div role="heading" id="{{ group_label_id }}">{{ item.label }}</div>
+        {{ render_dropdown_items(item.items, item_id) if item.items }}
+      </div>
+    {% elif item.type == "separator" %}
+      <hr role="separator" />
+    {% elif item.type == "item" or not item.type %}
+      {% if item.url %}
+        <a
+          role="menuitem"
+          href="{{ item.url }}"
+          {% for key, value in item.attrs %}
+            {% if key != "url" %} {{ key }}="{{ value }}" {% endif %}
+          {% endfor %}
+        >
+          {{ item.label | safe }}
+        </a>
+      {% else %}
+        <button
+          role="menuitem"
+          type="button"
+          {% for key, value in item.attrs %}
+             {{ key }}="{{ value }}"
+          {% endfor %}
+        >
+          {{ item.label | safe }}
+        </button>
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+{% endmacro %}

package/dist/assets/nunjucks/popover.njk

@@ -0,0 +1,55 @@
+{#
+  Renders a generic popover component, often used internally by other components like dropdowns or selects.
+
+  @param id {string} [optional] - Unique identifier for the popover component.
+  @param trigger {string} [optional] - HTML content for the element that triggers the popover.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
+  @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger element.
+  @param content_attrs {object} [optional] - Additional HTML attributes for the popover content div.
+#}
+{% macro popover(
+  id=None,
+  trigger=None,
+  main_attrs={},
+  trigger_attrs={},
+  content_attrs={}
+) %}
+<div
+  class="popover {{ main_attrs.class }}"
+  x-data="popover"
+  @click.away="open = false"
+  {% if id %}id="{{ id }}"{% endif %}
+  {% for key, value in main_attrs %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  {% if trigger %}
+  <button
+    type="button"
+    aria-haspopup="menu"
+    aria-expanded="false"
+    x-bind="$trigger"
+    {% if id %}
+    id="{{ id }}-trigger"
+    aria-controls="{{ id }}-menu"
+    {% endif %}
+    {% for key, value in trigger_attrs %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    {{ trigger | safe }}
+  </button>
+  {% endif %}
+  <div
+    data-popover
+    aria-hidden="true"
+    x-bind="$content"
+    {% if id %}id="{{ id }}-menu"{% endif %}
+    {% for key, value in content_attrs %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    {{ caller() if caller }}
+  </div>
+</div>
+{% endmacro %}

package/dist/assets/nunjucks/select.njk

@@ -0,0 +1,151 @@
+{#
+  Renders a select or combobox component.
+
+  @param id {string} [optional] - Unique identifier for the select component.
+  @param selected {string} [optional] - The initially selected value.
+  @param name {string} [optional] - The name attribute for the hidden input storing the selected value.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
+  @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
+  @param content_attrs {object} [optional] - Additional HTML attributes for the popover content div.
+  @param listbox_attrs {object} [optional] - Additional HTML attributes for the listbox div.
+  @param input_attrs {object} [optional] - Additional HTML attributes for the hidden input.
+  @param search_placeholder {string} [optional] [default="Search entries..."] - Placeholder text for the search input (combobox only).
+  @param is_combobox {boolean} [optional] [default=false] - Renders a combobox with search functionality if true.
+#}
+{% macro select(
+  id=None,
+  selected=None,
+  name=None,
+  items=None,
+  main_attrs={},
+  trigger_attrs={},
+  content_attrs={},
+  listbox_attrs={},
+  input_attrs={},
+  search_placeholder="Search entries...",
+  is_combobox=false
+) %}
+<div
+  class="popover {{ main_attrs.class }}"
+  x-data="select('{{ name }}', '{{ selected or '' }}')"
+  @click.away="open = false"
+  {% if id %}id="{{ id }}"{% endif %}
+  {% for key, value in main_attrs %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  <button
+    type="button"
+    aria-haspopup="listbox"
+    aria-expanded="false"
+    x-bind="$trigger"
+    {% if id %}
+    id="{{ id }}-trigger"
+    aria-controls="{{ id }}-content"
+    {% endif %}
+    class="btn-outline justify-between font-normal {{ trigger_attrs.class }}"
+    {% for key, value in trigger_attrs %}
+      {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+    {% endfor %}
+  >
+    <div x-html="selectedLabel" class="flex items-center gap-x-2"
+    ></div>
+    {% if is_combobox %}
+      <svg 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-chevrons-up-down-icon lucide-chevrons-up-down text-muted-foreground opacity-50 shrink-0"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
+    {% else %}
+      <svg 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-chevron-down-icon lucide-chevron-down text-muted-foreground opacity-50 shrink-0"><path d="m6 9 6 6 6-6"/></svg>
+    {% endif %}
+  </button>
+  <div
+    data-popover
+    aria-hidden="true"
+    x-bind="$content"
+    {% if id %}id="{{ id }}-content"{% endif %}
+    {% for key, value in content_attrs %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    {% if is_combobox %}
+    <header>
+      <svg 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-search-icon lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+      <input
+        type="text"
+        value=""
+        placeholder="{{ search_placeholder }}"
+        autocomplete="off"
+        autocorrect="off"
+        spellcheck="false"
+        aria-autocomplete="list"
+        role="combobox"
+        aria-expanded="true"
+        aria-controls="{{ id }}-content"
+        aria-labelledby="{{ id }}-trigger"
+        x-model="query"
+        x-bind="$filter"
+      >
+    </header>
+    {% endif %}
+    <div
+      role="listbox"
+      aria-orientation="vertical"
+      {% for key, value in listbox_attrs %}
+        {{ key }}="{{ value }}"
+      {% endfor %}
+    >
+      {% if items %}
+        {{ render_select_items(items, id ~ "-items" if id else "items") }}
+      {% else %}
+        {{ caller() if caller }}
+      {% endif %}
+    </div>
+  </div>
+  {% if name is defined %}
+    <input
+      type="hidden"
+      name="{{ name }}"
+      x-model="selectedValue"
+      {% for key, value in input_attrs %}
+        {% if key != 'name' %}{{ key }}="{{ value }}"{% endif %}
+      {% endfor %}
+    >
+  {% endif %}
+</div>
+{% endmacro %}
+
+{# 
+  Renders a list of items for the select component.
+
+  @param items {array} - The array of items to render.
+  @param parent_id_prefix {string} [optional] - The prefix for the item id.
+#}
+{% macro render_select_items(items, parent_id_prefix="items") %}
+  {% for item in items %}
+    {% set item_id = parent_id_prefix ~ "-" ~ loop.index %}
+
+    {% if item.type == "group" %}
+      {% set group_label_id = item.id if item.id else "group-label-" + item_id %}
+      <div
+        role="group"
+        aria-labelledby="{{ group_label_id }}"
+        {% for key, value in item.attrs %}
+          {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+        <div role="heading" id="{{ group_label_id }}">{{ item.label }}</div>
+        {{ render_select_items(item.items, item_id) if item.items }}
+      </div>
+    {% elif item.type == "separator" %}
+      <hr role="separator" />
+    {% elif item.type == "item" or not item.type %}
+      <div
+        role="option"
+        data-value="{{ item.value }}"
+        {% for key, value in item.attrs %}
+           {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+        {{ item.label | safe }}
+      </div>
+    {% endif %}
+  {% endfor %}
+{% endmacro %}

package/dist/assets/nunjucks/sidebar.njk

@@ -0,0 +1,138 @@
+{#
+  Renders a sidebar component.
+
+  @param id {string} [optional] - Unique identifier for the sidebar component.
+  @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.
+#}
+{% macro sidebar(
+  id=None,
+  label="Sidebar navigation",
+  open=true,
+  side=None,
+  header=None,
+  footer=None,
+  menu=None,
+  main_attrs={},
+  header_attrs={},
+  content_attrs={},
+  footer_attrs={},
+  content_wrapper_attrs=None
+) %}
+<div
+  {% 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 %}
+    {% if key != "class" %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+  x-data="sidebar({{ "true" if open else "false" }})"
+  x-bind="$main"
+>
+  <nav
+    aria-label="{{ label }}"
+  >
+    {% if header %}
+    <header
+      {% for key, value in header_attrs %}
+        {{ key }}="{{ value }}"
+      {% endfor %}
+    >
+      {{ header | safe }}
+    </header>
+    {% endif %}
+
+    <section
+      {% for key, value in content_attrs %}
+        {{ key }}="{{ value }}"
+      {% endfor %}
+    >
+      {% if menu %}
+        {{ render_sidebar_content(menu, id ~ "-content" if id else "content") }}
+      {% else %}
+        {{ caller() if caller }}
+      {% endif %}
+    </section>
+
+    {% if footer %}
+    <footer
+      {% for key, value in footer_attrs %}
+        {{ key }}="{{ value }}"
+      {% endfor %}
+    >
+      {{ footer | safe }}
+    </footer>
+    {% endif %}
+  </nav>
+</div>
+{% endmacro %}
+
+{#
+  Renders sidebar content recursively (groups, items, submenus, separators).
+
+  @param items {array} - The array of items to render.
+  @param parent_id_prefix {string} [optional] - Prefix for generating element IDs.
+#}
+{% macro render_sidebar_content(items, parent_id_prefix="content") %}
+  {% for item in items %}
+    {% set item_id = parent_id_prefix ~ "-" ~ loop.index %}
+
+    {% if item.type == "group" %}
+      {% set group_label_id = item.id if item.id else "group-label-" + item_id %}
+      <div
+        role="group"
+        {% if item.label %}aria-labelledby="{{ group_label_id }}"{% endif %}
+        {% for key, value in item.attrs %}
+          {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+        {% if item.label %}
+          <h3 id="{{ group_label_id }}">{{ item.label }}</h3>
+        {% endif %}
+        <ul>
+          {{ render_sidebar_content(item.items, item_id) if item.items }}
+        </ul>
+      </div>
+    {% elif item.type == "separator" %}
+      <hr role="separator"/>
+    {% elif item.type == "submenu" %}
+      <li>
+        <details
+          id="submenu-{{ item_id }}"
+          {{ "open" if item.open }}
+          {% for key, value in item.attrs %}
+            {% if key != "open" %}{{ key }}="{{ value }}"{% endif %}
+          {% endfor %}
+        >
+          <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 }}
+          </ul>
+        </details>
+      </li>
+    {% elif item.type == "item" or not item.type %}
+       <li>
+        <a
+          href="{{ item.url }}"
+          {{ 'aria-current="page"' if item.current }}
+          {% for key, value in item.attrs %}
+            {% if key != "href" and key != "aria-current" %}{{ key }}="{{ value }}"{% endif %}
+          {% endfor %}
+        >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
+          <span>{{ item.label }}</span>
+        </a>
+       </li>
+    {% endif %}
+  {% endfor %}
+{% endmacro %}

package/dist/assets/nunjucks/tabs.njk

@@ -0,0 +1,75 @@
+{#
+  Renders a tabs component.
+
+  @param id {string} - Unique identifier for the tabs component.
+  @param tabsets {array} - An array of objects, each representing a tab and its panel.
+    Each object should have:
+    - id {string}: Unique identifier prefix for the tab and panel.
+    - tab {string}: HTML content for the tab button.
+    - panel {string} [optional]: HTML content for the tab panel.
+    - tab_attrs {object} [optional]: Additional HTML attributes for the tab button.
+    - panel_attrs {object} [optional]: Additional HTML attributes for the tab panel div.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
+  @param tablist_attrs {object} [optional] - Additional HTML attributes for the tablist nav element.
+  @param default_tab_index {number} [optional] [default=1] - The 1-based index of the tab to be active initially.
+#}
+{% macro tabs(
+    id,
+    tabsets=[],
+    main_attrs=None,
+    tablist_attrs=None,
+    default_tab_index=1
+  )
+%}
+<div
+  class="tabs {{ main_attrs.class }}"
+  x-data="tabs({{ default_tab_index - 1 }})"
+  {% if id %}id="{{ id }}"{% endif %}
+  {% for key, value in main_attrs %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  <nav
+    role="tablist"
+    aria-orientation="horizontal"
+    x-bind="$tablist"
+    {% for key, value in tablist_attrs %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    {% for tabset in tabsets %}
+      <button
+        type="button"
+        role="tab"
+        id="{{ tabset.id }}-tab-{{ loop.index }}"
+        aria-controls="{{ tabset.id }}-panel-{{ loop.index }}"
+        aria-selected="{{ 'true' if loop.index == default_tab_index else 'false' }}"
+        tabindex="0"
+        {% for key, value in tabset.tab_attrs %}
+          {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+        {{ tabset.tab | safe }}
+      </button>
+    {% endfor %}
+  </nav>
+
+  {% for tabset in tabsets %}
+    {% if tabset.panel %}
+      <div
+        role="tabpanel"
+        id="{{ tabset.id }}-panel-{{ loop.index }}"
+        aria-labelledby="{{ tabset.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 %}
+          {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+        {{ tabset.panel | safe }}
+      </div>
+    {% endif %}
+  {% endfor %}
+</div>
+{% endmacro %}