@auvyx/ui 0.0.0-stage → 0.1.0

package/dist/ui/popover.css

@@ -0,0 +1,154 @@
+/* @auvyx/ui popover | order 23 */
+@layer components {
+  [data-popover] {
+      visibility: visible;
+      position: absolute;
+      z-index: 50;
+      width: max-content;
+      min-width: 100%;
+      --tw-scale-x: 100%;
+      --tw-scale-y: 100%;
+      --tw-scale-z: 100%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+      overflow-x: hidden;
+      overflow-y: auto;
+      opacity: 100%;
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      &[aria-hidden='true'] {
+        visibility: hidden;
+        --tw-scale-x: 95%;
+        --tw-scale-y: 95%;
+        --tw-scale-z: 95%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+        opacity: 0%;
+        &:not([data-side]), &[data-side='bottom'] {
+          --tw-translate-y: calc(var(--spacing) * -2);
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+        &[data-side='top'] {
+          --tw-translate-y: calc(var(--spacing) * 2);
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+        &[data-side='left'] {
+          --tw-translate-x: calc(var(--spacing) * 2);
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+        &[data-side='right'] {
+          --tw-translate-x: calc(var(--spacing) * -2);
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+        &[data-side='inline-start'] {
+          --tw-translate-x: calc(var(--spacing) * 2);
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+        &[data-side='inline-start']:dir(rtl) {
+          --tw-translate-x: calc(var(--spacing) * -2);
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+        &[data-side='inline-end'] {
+          --tw-translate-x: calc(var(--spacing) * -2);
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+        &[data-side='inline-end']:dir(rtl) {
+          --tw-translate-x: calc(var(--spacing) * 2);
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+      }
+      &:not([data-side]), &[data-side='bottom'] {
+        top: 100%;
+        margin-top: var(--spacing);
+      }
+      &[data-side='top'] {
+        bottom: 100%;
+        margin-bottom: var(--spacing);
+      }
+      &[data-side='left'] {
+        inset-inline-end: 100%;
+        margin-inline-end: var(--spacing);
+      }
+      &[data-side='right'] {
+        inset-inline-start: 100%;
+        margin-inline-start: var(--spacing);
+      }
+      &[data-side='inline-start'] {
+        inset-inline-end: 100%;
+        margin-inline-end: var(--spacing);
+      }
+      &[data-side='inline-end'] {
+        inset-inline-start: 100%;
+        margin-inline-start: var(--spacing);
+      }
+      &:not([data-side]), &[data-side='bottom'], &[data-side='top'] {
+        &:not([data-align]), &[data-align='start'] {
+          inset-inline-start: calc(var(--spacing) * 0);
+        }
+        &[data-align='end'] {
+          inset-inline-end: calc(var(--spacing) * 0);
+        }
+        &[data-align='center'] {
+          inset-inline-start: calc(1/2 * 100%);
+          --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+      }
+      &[data-side='left'], &[data-side='right'], &[data-side='inline-start'], &[data-side='inline-end'] {
+        &:not([data-align]), &[data-align='start'] {
+          top: 0;
+        }
+        &[data-align='end'] {
+          bottom: 0;
+        }
+        &[data-align='center'] {
+          top: calc(1 / 2 * 100%);
+          --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+      }
+    }
+  .popover {
+      position: relative;
+      display: inline-flex;
+    }
+}
+
+@layer components {
+  [data-popover] {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--spacing) * 4);
+      border-radius: var(--radius-md);
+      background-color: var(--color-popover);
+      padding: calc(var(--spacing) * 4);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      color: var(--color-popover-foreground);
+      --tw-shadow: var(--shadow-md, 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)));
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + 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);
+      --tw-ring-color: color-mix(in oklab, var(--color-foreground) 10%, transparent);
+      --tw-duration: 100ms;
+      transition-duration: 100ms;
+    }
+  .popover > [data-popover] > header, .popover > [data-popover] > [data-header] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  .popover > [data-popover] > header > :is(h1, h2, h3, h4, h5, h6), .popover > [data-popover] > :is(h1, h2, h3, h4, h5, h6, [data-title]) {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+  .popover > [data-popover] > header > p, .popover > [data-popover] > [data-description] {
+      color: var(--color-muted-foreground);
+    }
+}

package/dist/ui/popover.js

@@ -0,0 +1,268 @@
+/* @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 initPopover = (popoverComponent) => {
+    if (popoverComponent.dataset.popoverInitialized) return;
+
+    const trigger = popoverComponent.querySelector(':scope > button');
+    const content = popoverComponent.querySelector(':scope > [data-popover]');
+
+    if (!trigger || !content) {
+      const missing = [];
+      if (!trigger) missing.push('trigger');
+      if (!content) missing.push('content');
+      console.error(`Popover initialisation failed. Missing element(s): ${missing.join(', ')}`, popoverComponent);
+      return;
+    }
+
+    const closePopover = (focusOnTrigger = true) => {
+      if (trigger.getAttribute('aria-expanded') === 'false') return;
+      trigger.setAttribute('aria-expanded', 'false');
+      content.setAttribute('aria-hidden', 'true');
+      if (focusOnTrigger) {
+        trigger.focus();
+      }
+    };
+
+    const openPopover = () => {
+      document.dispatchEvent(new CustomEvent('basecoat:popover', {
+        detail: { source: popoverComponent }
+      }));
+      
+      const elementToFocus = content.querySelector('[autofocus]');
+      if (elementToFocus) {
+        content.addEventListener('transitionend', () => {
+          elementToFocus.focus();
+        }, { once: true });
+      }
+
+      trigger.setAttribute('aria-expanded', 'true');
+      content.setAttribute('aria-hidden', 'false');
+    };
+
+    const handleTriggerClick = () => {
+      const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
+      if (isExpanded) {
+        closePopover();
+      } else {
+        openPopover();
+      }
+    };
+
+    const handleKeydown = (event) => {
+      if (event.key === 'Escape') {
+        closePopover();
+      }
+    };
+
+    const handleDocumentClick = (event) => {
+      if (!popoverComponent.contains(event.target)) {
+        closePopover();
+      }
+    };
+
+    const handleDocumentPopover = (event) => {
+      if (!popoverComponent.contains(event.detail.source)) {
+        closePopover(false);
+      }
+    };
+
+    trigger.addEventListener('click', handleTriggerClick);
+    popoverComponent.addEventListener('keydown', handleKeydown);
+    document.addEventListener('click', handleDocumentClick);
+    document.addEventListener('basecoat:popover', handleDocumentPopover);
+
+    popoverComponent._destroy = () => {
+      trigger.removeEventListener('click', handleTriggerClick);
+      popoverComponent.removeEventListener('keydown', handleKeydown);
+      document.removeEventListener('click', handleDocumentClick);
+      document.removeEventListener('basecoat:popover', handleDocumentPopover);
+    };
+
+    popoverComponent.dataset.popoverInitialized = true;
+    popoverComponent.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  if (window.basecoat) {
+    window.basecoat.register('popover', '.popover:not([data-popover-initialized]):not(:has(> [data-popover][popover]))', initPopover);
+  }
+})();
+
+// Loaded after the DOM is ready: initialize now.
+if (document.readyState !== 'loading') { window.basecoat.initAll(); window.basecoat.start(); }

package/dist/ui/popover.native.css

@@ -0,0 +1,84 @@
+/* @auvyx/ui popover.native | order 61 */
+@layer components {
+  :is(.popover, .dropdown-menu, .date-picker, .navigation-menu > ul > li):has(> [data-popover][popover]) {
+      anchor-scope: --bc-popover;
+      > :is(button, [popovertarget]):first-child {
+        anchor-name: --bc-popover;
+      }
+    }
+  :where([data-popover][popover]) {
+      color: inherit;
+      border: 0;
+      padding: 0;
+      background: transparent;
+      overflow: visible;
+    }
+  [data-popover][popover] {
+      visibility: visible;
+      opacity: 0;
+      scale: 0.95;
+      translate: none;
+      transition: opacity 150ms ease, scale 150ms ease, translate 150ms ease, overlay 150ms allow-discrete, display 150ms allow-discrete;
+      &:not(:popover-open) {
+        display: none;
+      }
+      &:popover-open {
+        opacity: 1;
+        scale: 1;
+        @starting-style {
+          opacity: 0;
+          scale: 0.95;
+        }
+      }
+    }
+  @supports (anchor-name: --a) {
+      [data-popover][popover] {
+        position: absolute;
+        inset: auto;
+        margin: 0;
+        position-anchor: --bc-popover;
+        min-width: anchor-size(width);
+        position-try-fallbacks: flip-block, flip-inline;
+        &:not([data-side]), &[data-side='bottom'] {
+          position-area: block-end span-inline-end;
+          margin-block-start: 0.25rem;
+          &[data-align='end'] {
+            position-area: block-end span-inline-start;
+          }
+          &[data-align='center'] {
+            position-area: block-end;
+          }
+        }
+        &[data-side='top'] {
+          position-area: block-start span-inline-end;
+          margin-block-end: 0.25rem;
+          &[data-align='end'] {
+            position-area: block-start span-inline-start;
+          }
+          &[data-align='center'] {
+            position-area: block-start;
+          }
+        }
+        &:is([data-side='right'], [data-side='inline-end']) {
+          position-area: inline-end span-block-end;
+          margin-inline-start: 0.25rem;
+          &[data-align='end'] {
+            position-area: inline-end span-block-start;
+          }
+          &[data-align='center'] {
+            position-area: inline-end;
+          }
+        }
+        &:is([data-side='left'], [data-side='inline-start']) {
+          position-area: inline-start span-block-end;
+          margin-inline-end: 0.25rem;
+          &[data-align='end'] {
+            position-area: inline-start span-block-start;
+          }
+          &[data-align='center'] {
+            position-area: inline-start;
+          }
+        }
+      }
+    }
+}

package/dist/ui/progress.css

@@ -0,0 +1,29 @@
+/* @auvyx/ui progress | order 24 */
+@layer components {
+  .progress {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      overflow: hidden;
+    }
+  .progress:dir(rtl) {
+      flex-direction: row-reverse;
+    }
+  .progress > span {
+      height: 100%;
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+}
+
+@layer components {
+  .progress {
+      height: calc(var(--spacing) * 1.5);
+      border-radius: calc(infinity * 1px);
+      background-color: var(--color-muted);
+    }
+  .progress > span {
+      background-color: var(--color-primary);
+    }
+}