basecoat-cli 0.1.1 → 0.2.0-beta.1

package/dist/assets/nunjucks/select.njk

@@ -17,39 +17,53 @@
   selected=None,
   name=None,
   items=None,
-  main_attrs={},
   trigger_attrs={},
-  content_attrs={},
+  popover_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 %}
->
+{% set id = id or ("select-" + (range(100000, 999999) | random | string)) %}
+
+{% set first_option = [] %}
+{% set selected_option = [] %}
+
+{% for item in items %}
+  {% if item.type == "group" %}
+    {% for sub_item in item.items %}
+      {% if not first_option[0] %}
+        {% set first_option = (first_option.push(sub_item), first_option) %}
+      {% endif %}
+      {% if selected and sub_item.value == selected and not selected_option[0] %}
+        {% set selected_option = (selected_option.push(sub_item), selected_option) %}
+      {% endif %}
+    {% endfor %}
+  {% else %}
+    {% if not first_option[0] %}
+      {% set first_option = (first_option.push(item), first_option) %}
+    {% endif %}
+    {% if selected and item.value == selected and not selected_option[0] %}
+      {% set selected_option = (selected_option.push(item), selected_option) %}
+    {% endif %}
+  {% endif %}
+{% endfor %}
+
+{% set default_option = selected_option[0] or first_option[0] or None %}
+
+<div class="select">
   <button
     type="button"
+    class="btn-outline justify-between font-normal {{ trigger_attrs.class }}"
+    id="{{ id }}-trigger"
+    popovertarget="{{ id }}"
     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 }}"
+    aria-controls="{{ id }}-listbox"
     {% 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>
+    <span class="truncate">{{ default_option.label }}</span>
     {% 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 %}
@@ -57,12 +71,11 @@
     {% 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 }}"
+    popover
+    id="{{ id }}"
+    class="popover {{ popover_attrs.class }}"
+    {% for key, value in popover_attrs %}
+      {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
     {% endfor %}
   >
     {% if is_combobox %}
@@ -80,35 +93,33 @@
         aria-expanded="true"
         aria-controls="{{ id }}-content"
         aria-labelledby="{{ id }}-trigger"
-        x-model="query"
-        x-bind="$filter"
       >
     </header>
     {% endif %}
     <div
       role="listbox"
+      id="{{ id }}-listbox"
       aria-orientation="vertical"
+      aria-labelledby="{{ id }}-trigger"
       {% for key, value in listbox_attrs %}
         {{ key }}="{{ value }}"
       {% endfor %}
     >
-      {% if items %}
-        {{ render_select_items(items, id ~ "-items" if id else "items") }}
+      {% if items.length > 0 %}
+        {{ render_select_items(items, default_option.value, 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 %}
+  <input
+    type="hidden"
+    name="{{ name or id ~ '-value' }}"
+    value="{{ selected or '' }}"
+    {% for key, value in input_attrs %}
+      {% if key != 'name' and key != 'value' %}{{ key }}="{{ value }}"{% endif %}
+    {% endfor %}
+  >
 </div>
 {% endmacro %}
 
@@ -118,10 +129,9 @@
   @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") %}
+{% macro render_select_items(items, selected, 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
@@ -132,14 +142,16 @@
         {% endfor %}
       >
         <div role="heading" id="{{ group_label_id }}">{{ item.label }}</div>
-        {{ render_select_items(item.items, item_id) if item.items }}
+        {{ render_select_items(item.items, selected, item_id) if item.items }}
       </div>
     {% elif item.type == "separator" %}
       <hr role="separator" />
     {% elif item.type == "item" or not item.type %}
       <div
+        id="{{ item_id }}"
         role="option"
         data-value="{{ item.value }}"
+        {% if selected == item.value %}aria-selected="true"{% endif %}
         {% for key, value in item.attrs %}
            {{ key }}="{{ value }}"
         {% endfor %}

package/dist/assets/nunjucks/sidebar.njk

@@ -23,18 +23,15 @@
   footer_attrs={},
   content_wrapper_attrs=None
 ) %}
-<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 %}
     {% if key != "class" %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
-  x-data="sidebar({{ "true" if open else "false" }})"
-  x-bind="$main"
 >
   <nav
     aria-label="{{ label }}"
@@ -71,7 +68,7 @@
     </footer>
     {% endif %}
   </nav>
-</div>
+</aside>
 {% endmacro %}
 
 {#

package/dist/assets/nunjucks/tabs.njk

@@ -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,
     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 %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
@@ -32,7 +32,6 @@
   <nav
     role="tablist"
     aria-orientation="horizontal"
-    x-bind="$tablist"
     {% for key, value in tablist_attrs %}
       {{ key }}="{{ value }}"
     {% endfor %}
@@ -41,8 +40,8 @@
       <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 %}
@@ -58,8 +57,8 @@
     {% 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 %}

package/dist/assets/nunjucks/toast.njk

@@ -10,16 +10,14 @@
 {% macro toaster(
   id="toaster",
   toasts=[],
-  main_attrs=None,
-  is_fragment=false
+  attrs=None
 ) %}
 <div
   id="{{ id }}"
   class="toaster"
-  {% for key, value in main_attrs %}
+  {% for key, value in attrs %}
     {{ key }}="{{ value }}"
   {% 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" %}
+        {% lucide "circle-check" %}
+      {% elif category == "error" %}
+        {% lucide "circle-x" %}
+      {% elif category == "info" %}
+        {% lucide "info" %}
+      {% elif category == "warning" %}
+        {% lucide "triangle-alert" %}
       {% 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 %}

package/dist/index.js

@@ -62,17 +62,17 @@ async function ensureConfiguration() {
   const pathPrompts = [];
   if (!config.templateDest || config.templateDest === DEFAULT_CONFIG.templateDest) {
     pathPrompts.push({
-        type: 'input',
-        name: 'templateDest',
-        message: 'Where should template files be placed?',
+      type: 'input',
+      name: 'templateDest',
+      message: 'Where should template files be placed?',
         default: DEFAULT_CONFIG.templateDest,
     });
   }
   if (!config.scriptDest || config.scriptDest === DEFAULT_CONFIG.scriptDest) {
     pathPrompts.push({
-        type: 'input',
-        name: 'scriptDest',
-        message: 'Where should script files be placed?',
+      type: 'input',
+      name: 'scriptDest',
+      message: 'Where should script files be placed?',
         default: DEFAULT_CONFIG.scriptDest,
     });
   }
@@ -108,7 +108,7 @@ async function addComponent(componentName) {
     }
     if (!scriptExists) {
       console.error(`  Error: Script file for component '${componentName}' not found in CLI assets. Searched: ${scriptSource}`);
-    }
+}
     if (!templateExists || !scriptExists) return; // Skip this component if sources are missing
 
     await fs.ensureDir(path.dirname(templateDestPath));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basecoat-cli",
-  "version": "0.1.1",
+  "version": "0.2.0-beta.1",
   "description": "Add Basecoat components to your project",
   "author": "hunvreus",
   "license": "MIT",

package/dist/assets/js/dialog.js

@@ -1,54 +0,0 @@
-window.basecoat = window.basecoat || {};
-window.basecoat.registerDialog = function(Alpine) {
-  if (Alpine.components && Alpine.components.dialog) return;
-
-  Alpine.data('dialog', (initialOpen = false, initialCloseOnOverlayClick = true) => ({
-    id: null,
-    open: false,
-    closeOnOverlayClick: true,
-
-    init() {
-      this.id = this.$el.id;
-      if (!this.id) {
-        console.warn('Dialog component initialized without an `id`. This may cause issues with event targeting and accessibility.');
-      }
-      this.open = initialOpen;
-      this.closeOnOverlayClick = initialCloseOnOverlayClick;
-    },
-    show() {
-      if (!this.open) {
-        this.open = true;
-        this.$nextTick(() => {
-          this.$el.dispatchEvent(new CustomEvent('dialog:opened', { bubbles: true, detail: { id: this.id } }));
-          setTimeout(() => {
-            const focusTarget = this.$refs.focusOnOpen || this.$el.querySelector('[role="dialog"]');
-            if (focusTarget) focusTarget.focus();
-          }, 50);
-        });
-      }
-    },
-    hide() {
-      if (this.open) {
-        this.open = false;
-        this.$nextTick(() => {
-          this.$el.dispatchEvent(new CustomEvent('dialog:closed', { bubbles: true, detail: { id: this.id } }));
-        });
-      }
-    },
-
-    $main: {
-      '@dialog:open.window'(e) { if (e.detail && e.detail.id === this.id) this.show() },
-      '@dialog:close.window'(e) { if (e.detail && e.detail.id === this.id) this.hide() },
-      '@keydown.escape.window'() { this.open && this.hide() },
-    },
-    $trigger: {
-      '@click'() { this.show() },
-      ':aria-expanded'() { return this.open }
-    },
-    $content: {
-      ':inert'() { return !this.open },
-      '@click.self'() { if (this.closeOnOverlayClick) this.hide() },
-      'x-cloak': ''
-    }
-  }));
-};

package/dist/assets/js/popover.js

@@ -1,26 +0,0 @@
-window.basecoat = window.basecoat || {};
-window.basecoat.registerPopover = function(Alpine) {
-  if (Alpine.components && Alpine.components.popover) return;
-
-  Alpine.data('popover', () => ({
-    open: false,
-
-    $trigger: {
-      '@click'() { this.open = !this.open },
-      '@keydown.escape.prevent'() {
-        this.open = false;
-        this.$refs.trigger.focus();
-      },
-      ':aria-expanded'() { return this.open },
-      'x-ref': 'trigger'
-    },
-    $content: {
-      '@keydown.escape.prevent'() {
-        this.open = false;
-        this.$refs.trigger.focus();
-      },
-      ':aria-hidden'() { return !this.open },
-      'x-cloak': ''
-    },
-  }));
-};