@auvyx/ui 0.0.0-stage → 0.1.0

package/dist/ui/tabs.js

@@ -0,0 +1,288 @@
+/* @auvyx/ui v0.1.0 | MIT | based on Basecoat (MIT) */
+// Basecoat core, once per page.
+if (!window.basecoat) (() => {
+  const componentRegistry = {};
+  let observer = null;
+
+  const registerComponent = (name, selectorOrOptions, initFunction) => {
+    const options = typeof selectorOrOptions === 'object'
+      ? selectorOrOptions
+      : { selector: selectorOrOptions, init: initFunction };
+
+    componentRegistry[name] = {
+      selector: options.selector,
+      init: options.init,
+      refresh: options.refresh,
+    };
+  };
+
+  const initComponent = (element, componentName) => {
+    const component = componentRegistry[componentName];
+    if (!component) return;
+
+    try {
+      component.init(element);
+      if (element.hasAttribute(`data-${componentName}-initialized`)) {
+        element.dataset.basecoatComponent = componentName;
+      }
+    } catch (error) {
+      console.error(`Failed to initialize ${componentName}:`, error);
+      if (typeof element._destroy === 'function') {
+        try {
+          element._destroy();
+        } catch (destroyError) {
+          console.error(`Failed to clean up ${componentName} after initialization error:`, destroyError);
+        }
+      }
+      delete element._destroy;
+      element.removeAttribute(`data-${componentName}-initialized`);
+      delete element.dataset.basecoatComponent;
+    }
+  };
+
+  const destroyComponent = (element) => {
+    if (!element || element.nodeType !== Node.ELEMENT_NODE) return;
+    const componentName = element.dataset?.basecoatComponent;
+
+    if (typeof element._destroy === 'function') {
+      try {
+        element._destroy();
+      } catch (error) {
+        console.error('Failed to destroy Basecoat component:', error);
+      }
+    }
+
+    delete element._destroy;
+    if (componentName) element.removeAttribute(`data-${componentName}-initialized`);
+    delete element.dataset.basecoatComponent;
+  };
+
+  const destroyRemovedComponents = (node) => {
+    if (node.nodeType !== Node.ELEMENT_NODE) return;
+    if (node.isConnected) return;
+
+    if (node.dataset?.basecoatComponent) destroyComponent(node);
+    node.querySelectorAll('[data-basecoat-component]').forEach(destroyComponent);
+  };
+
+  const uniqueElements = (elements) => Array.from(new Set(elements));
+
+  const getComponentElements = (componentName, selector, force = false) => {
+    const elements = Array.from(document.querySelectorAll(selector));
+    if (force) {
+      elements.push(...document.querySelectorAll(`[data-basecoat-component="${componentName}"]`));
+    }
+    return uniqueElements(elements);
+  };
+
+  const initAllComponents = (options = {}) => {
+    const force = options.force === true;
+    Object.entries(componentRegistry).forEach(([name, { selector }]) => {
+      getComponentElements(name, selector, force).forEach((element) => {
+        const wasComponent = element.dataset?.basecoatComponent === name;
+        if (force) destroyComponent(element);
+        if (wasComponent || element.matches(selector)) initComponent(element, name);
+      });
+    });
+  };
+
+  const initNewComponents = (node) => {
+    if (node.nodeType !== Node.ELEMENT_NODE) return;
+
+    Object.entries(componentRegistry).forEach(([name, { selector }]) => {
+      if (node.matches(selector)) initComponent(node, name);
+      node.querySelectorAll(selector).forEach(element => initComponent(element, name));
+    });
+  };
+
+  const refreshComponent = (element) => {
+    if (!element) return;
+    if (typeof element.refresh === 'function') {
+      element.refresh();
+      return;
+    }
+
+    const componentName = element.dataset?.basecoatComponent;
+    const component = componentName ? componentRegistry[componentName] : null;
+    if (component?.refresh) {
+      component.refresh(element);
+    }
+  };
+
+  const startObserver = () => {
+    if (observer) return;
+
+    observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach(initNewComponents);
+        mutation.removedNodes.forEach(destroyRemovedComponents);
+      });
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+  };
+
+  const stopObserver = () => {
+    if (!observer) return;
+    observer.disconnect();
+    observer = null;
+  };
+
+  const initRegisteredComponent = (componentName, options = {}) => {
+    const component = componentRegistry[componentName];
+    if (!component) {
+      console.warn(`Component '${componentName}' not found in registry`);
+      return;
+    }
+
+    const force = options.force === true;
+    getComponentElements(componentName, component.selector, force).forEach((element) => {
+      const wasComponent = element.dataset?.basecoatComponent === componentName;
+      if (force) destroyComponent(element);
+      if (wasComponent || element.matches(component.selector)) initComponent(element, componentName);
+    });
+  };
+
+  const initAllRegisteredComponents = (options = {}) => {
+    initAllComponents(options);
+  };
+
+  const setTheme = (mode) => {
+    const dark = mode === 'dark';
+    document.documentElement.classList.toggle('dark', dark);
+    try { localStorage.setItem('themeMode', dark ? 'dark' : 'light'); } catch (_) {}
+    document.dispatchEvent(new CustomEvent('basecoat:themechange', { detail: { mode: dark ? 'dark' : 'light' } }));
+  };
+
+  const getTheme = () => document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+
+  window.basecoat = {
+    register: registerComponent,
+    init: initRegisteredComponent,
+    initAll: initAllRegisteredComponents,
+    refresh: refreshComponent,
+    start: startObserver,
+    stop: stopObserver,
+    theme: {
+      get: getTheme,
+      set: setTheme,
+      toggle: () => setTheme(getTheme() === 'dark' ? 'light' : 'dark'),
+    },
+  };
+
+  document.addEventListener('DOMContentLoaded', () => {
+    initAllComponents();
+    startObserver();
+  });
+})();
+
+(() => {
+  const states = new WeakMap();
+
+  const isDisabled = (tab) => tab.disabled || tab.getAttribute('aria-disabled') === 'true';
+
+  const getElements = (root) => {
+    const tablist = root.querySelector('[role="tablist"]');
+    const tabs = tablist ? Array.from(tablist.querySelectorAll('[role="tab"]')) : [];
+    const panels = tabs.map(tab => document.getElementById(tab.getAttribute('aria-controls'))).filter(Boolean);
+    return { tablist, tabs, panels };
+  };
+
+  const refreshTabs = (root) => {
+    const state = states.get(root);
+    if (!state) return;
+
+    Object.assign(state, getElements(root));
+    if (!state.tablist) return;
+
+    const selected = state.tabs.find(tab => tab.getAttribute('aria-selected') === 'true' && !isDisabled(tab))
+      || state.tabs.find(tab => !isDisabled(tab));
+    if (selected) root.select(selected, false);
+  };
+
+  const initTabs = (root) => {
+    if (root.dataset.tabsInitialized) return;
+
+    const state = {};
+    states.set(root, state);
+    root.refresh = () => refreshTabs(root);
+
+    const selectTab = (tabToSelect, focus = false) => {
+      if (!tabToSelect || isDisabled(tabToSelect)) return;
+
+      state.tabs.forEach((tab) => {
+        tab.setAttribute('aria-selected', 'false');
+        tab.setAttribute('tabindex', '-1');
+        const panel = document.getElementById(tab.getAttribute('aria-controls'));
+        if (panel) panel.hidden = true;
+      });
+
+      tabToSelect.setAttribute('aria-selected', 'true');
+      tabToSelect.setAttribute('tabindex', '0');
+      const activePanel = document.getElementById(tabToSelect.getAttribute('aria-controls'));
+      if (activePanel) activePanel.hidden = false;
+      if (focus) tabToSelect.focus();
+    };
+
+    root.select = selectTab;
+    refreshTabs(root);
+    if (!state.tablist) {
+      states.delete(root);
+      delete root.refresh;
+      delete root.select;
+      return;
+    }
+
+    const handleClick = (event) => {
+      const clickedTab = event.target.closest('[role="tab"]');
+      if (clickedTab) root.select(clickedTab);
+    };
+
+    const handleKeydown = (event) => {
+      const currentTab = event.target;
+      if (!state.tabs.includes(currentTab)) return;
+
+      const enabledTabs = state.tabs.filter(tab => !isDisabled(tab));
+      const currentIndex = enabledTabs.indexOf(currentTab);
+      const orientation = state.tablist.getAttribute('aria-orientation') || 'horizontal';
+      if (currentIndex === -1) return;
+
+      let nextTab;
+      if (event.key === 'ArrowRight' && orientation === 'horizontal') nextTab = enabledTabs[(currentIndex + 1) % enabledTabs.length];
+      if (event.key === 'ArrowLeft' && orientation === 'horizontal') nextTab = enabledTabs[(currentIndex - 1 + enabledTabs.length) % enabledTabs.length];
+      if (event.key === 'ArrowDown' && orientation === 'vertical') nextTab = enabledTabs[(currentIndex + 1) % enabledTabs.length];
+      if (event.key === 'ArrowUp' && orientation === 'vertical') nextTab = enabledTabs[(currentIndex - 1 + enabledTabs.length) % enabledTabs.length];
+      if (event.key === 'Home') nextTab = enabledTabs[0];
+      if (event.key === 'End') nextTab = enabledTabs[enabledTabs.length - 1];
+      if (!nextTab) return;
+
+      event.preventDefault();
+      root.select(nextTab, true);
+    };
+
+    state.tablist.addEventListener('click', handleClick);
+    state.tablist.addEventListener('keydown', handleKeydown);
+
+    root._destroy = () => {
+      state.tablist.removeEventListener('click', handleClick);
+      state.tablist.removeEventListener('keydown', handleKeydown);
+      states.delete(root);
+      delete root.refresh;
+      delete root.select;
+    };
+
+    root.dataset.tabsInitialized = 'true';
+    root.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  if (window.basecoat) {
+    window.basecoat.register('tabs', {
+      selector: '.tabs:not([data-tabs-initialized])',
+      init: initTabs,
+      refresh: refreshTabs,
+    });
+  }
+})();
+
+// Loaded after the DOM is ready: initialize now.
+if (document.readyState !== 'loading') { window.basecoat.initAll(); window.basecoat.start(); }

package/dist/ui/textarea.css

@@ -0,0 +1,91 @@
+/* @auvyx/ui textarea | order 34 */
+@layer components {
+  .field > textarea, .textarea {
+      display: flex;
+      field-sizing: content;
+      min-height: calc(var(--spacing) * 16);
+      width: 100%;
+      --tw-outline-style: none;
+      outline-style: none;
+      &::placeholder {
+        color: var(--color-muted-foreground);
+      }
+      &:disabled {
+        cursor: not-allowed;
+      }
+      &:disabled {
+        opacity: 50%;
+      }
+    }
+}
+
+@layer components {
+  .field > textarea, .textarea {
+      border-radius: var(--radius-md);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--color-input);
+      background-color: transparent;
+      padding-inline: calc(var(--spacing) * 2.5);
+      padding-block: calc(var(--spacing) * 2);
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+      --tw-shadow: var(--shadow-xs, 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      transition-property: color,box-shadow;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      &:focus-visible {
+        border-color: var(--color-ring);
+      }
+      &:focus-visible {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      &:focus-visible {
+        --tw-ring-color: var(--color-ring);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        }
+      }
+      &[aria-invalid="true"] {
+        border-color: var(--color-destructive);
+      }
+      &[aria-invalid="true"] {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      &[aria-invalid="true"] {
+        --tw-ring-color: var(--color-destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+        }
+      }
+      @media (width >= 48rem) {
+        font-size: var(--text-sm);
+        line-height: var(--tw-leading, var(--text-sm--line-height));
+      }
+      &:is(html.dark *) {
+        background-color: var(--color-input);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
+        }
+      }
+      &:is(html.dark *) {
+        &[aria-invalid="true"] {
+          border-color: var(--color-destructive);
+          @supports (color: color-mix(in lab, red, red)) {
+            border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
+          }
+        }
+      }
+      &:is(html.dark *) {
+        &[aria-invalid="true"] {
+          --tw-ring-color: var(--color-destructive);
+          @supports (color: color-mix(in lab, red, red)) {
+            --tw-ring-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
+          }
+        }
+      }
+    }
+}

package/dist/ui/toast.css

@@ -0,0 +1,110 @@
+/* @auvyx/ui toast | order 36 */
+@layer components {
+  .toaster {
+      pointer-events: none;
+      position: fixed;
+      bottom: 0;
+      z-index: 50;
+      display: flex;
+      width: 100%;
+      flex-direction: column-reverse;
+      gap: calc(var(--spacing) * 4);
+      padding: calc(var(--spacing) * 4);
+      @media (width >= 40rem) {
+        max-width: calc(var(--spacing) * 90);
+      }
+      &:not([data-align]), &[data-align='end'] {
+        right: 0;
+      }
+      &[data-align='start'] {
+        left: 0;
+      }
+      &[data-align='center'] {
+        left: calc(1 / 2 * 100%);
+        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+      .toast {
+        pointer-events: auto;
+        display: grid;
+        width: 100%;
+        animation: toast-up 0.3s ease-in-out;
+        grid-template-rows: 1fr;
+        transition-property: grid-template-rows,opacity;
+        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+        transition-duration: var(--tw-duration, var(--default-transition-duration));
+        --tw-duration: 300ms;
+        transition-duration: 300ms;
+        --tw-ease: var(--ease-in-out);
+        transition-timing-function: var(--ease-in-out);
+        .toast-content {
+          display: flex;
+          align-items: center;
+          gap: calc(var(--spacing) * 2.5);
+          overflow: hidden;
+          padding: calc(var(--spacing) * 3);
+          font-size: 13px;
+          svg {
+            width: calc(var(--spacing) * 4);
+            height: calc(var(--spacing) * 4);
+            flex-shrink: 0;
+          }
+          section {
+            h2 {
+              --tw-font-weight: var(--font-weight-medium);
+              font-weight: var(--font-weight-medium);
+              --tw-tracking: var(--tracking-tight);
+              letter-spacing: var(--tracking-tight);
+            }
+            p {
+              word-break: break-all;
+              color: var(--color-muted-foreground);
+            }
+          }
+          footer {
+            margin-inline-start: auto;
+            display: flex;
+            flex-direction: column;
+            gap: calc(var(--spacing) * 2);
+            [data-toast-action], [data-toast-cancel] {
+              height: calc(var(--spacing) * 6);
+              padding-inline: calc(var(--spacing) * 2.5);
+              font-size: var(--text-xs);
+              line-height: var(--tw-leading, var(--text-xs--line-height));
+            }
+          }
+        }
+        &[aria-hidden='true'] {
+          grid-template-rows: 0fr;
+          overflow: hidden;
+          border-style: var(--tw-border-style);
+          border-width: 0px;
+          padding: 0;
+          opacity: 0%;
+          .toast-content {
+            border-style: var(--tw-border-style);
+            border-width: 0px;
+          }
+        }
+      }
+    }
+}
+
+@keyframes toast-up {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+@layer components {
+  .toast-content {
+      border-radius: var(--radius-2xl);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      background-color: var(--color-popover);
+      color: var(--color-popover-foreground);
+      --tw-shadow: var(--shadow-lg, 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+}