@auvyx/ui 0.0.0-stage → 0.1.0

package/dist/ui/toast.js

@@ -0,0 +1,378 @@
+/* @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();
+  });
+})();
+
+(() => {
+  let toaster;
+  const toasts = new WeakMap();
+  let isPaused = false;
+  const 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"><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"><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"><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"><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>'
+  };
+
+  function initToaster(toasterElement) {
+    if (toasterElement.dataset.toasterInitialized) return;
+    toaster = toasterElement;
+
+    const handleClick = (event) => {
+      const actionLink = event.target.closest('.toast footer a');
+      const actionButton = event.target.closest('.toast footer button');
+      if (actionLink || actionButton) {
+        closeToast(event.target.closest('.toast'));
+      }
+    };
+
+    toaster.addEventListener('mouseenter', pauseAllTimeouts);
+    toaster.addEventListener('mouseleave', resumeAllTimeouts);
+    toaster.addEventListener('click', handleClick);
+
+    toasterElement.toast = (config = {}) => {
+      const toastElement = createToast(config);
+      toasterElement.appendChild(toastElement);
+      initToast(toastElement);
+      return toastElement;
+    };
+    toasterElement.closeAll = () => {
+      toasterElement.querySelectorAll('.toast:not([aria-hidden="true"])').forEach(closeToast);
+    };
+
+    toaster.querySelectorAll('.toast:not([data-toast-initialized])').forEach(initToast);
+    toaster._destroy = () => {
+      toaster.removeEventListener('mouseenter', pauseAllTimeouts);
+      toaster.removeEventListener('mouseleave', resumeAllTimeouts);
+      toaster.removeEventListener('click', handleClick);
+      toaster.querySelectorAll('.toast[data-toast-initialized]').forEach(toast => toast._destroy?.());
+      delete toaster.toast;
+      delete toaster.closeAll;
+      if (toaster === toasterElement) toaster = null;
+    };
+    toaster.dataset.toasterInitialized = 'true';
+    toaster.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  }
+
+  function initToast(element) {
+    if (element.dataset.toastInitialized) return;
+
+    const duration = parseInt(element.dataset.duration);
+    const timeoutDuration = duration !== -1
+      ? duration || (element.dataset.category === 'error' ? 5000 : 3000)
+      : -1;
+
+    const state = {
+      remainingTime: timeoutDuration,
+      timeoutId: null,
+      startTime: null,
+    };
+
+    if (timeoutDuration !== -1) {
+      if (isPaused) {
+        state.timeoutId = null;
+      } else {
+        state.startTime = Date.now();
+        state.timeoutId = setTimeout(() => closeToast(element), timeoutDuration);
+      }
+    }
+    toasts.set(element, state);
+
+    element.close = () => closeToast(element);
+    element._destroy = () => {
+      clearTimeout(state.timeoutId);
+      toasts.delete(element);
+      delete element.close;
+    };
+    element.dataset.toastInitialized = 'true';
+  }
+
+  function pauseAllTimeouts() {
+    if (isPaused || !toaster) return;
+
+    isPaused = true;
+
+    toaster.querySelectorAll('.toast:not([aria-hidden="true"])').forEach(element => {
+      if (!toasts.has(element)) return;
+
+      const state = toasts.get(element);
+      if (state.timeoutId) {
+        clearTimeout(state.timeoutId);
+        state.timeoutId = null;
+        state.remainingTime -= Date.now() - state.startTime;
+      }
+    });
+  }
+
+  function resumeAllTimeouts() {
+    if (!isPaused || !toaster) return;
+
+    isPaused = false;
+
+    toaster.querySelectorAll('.toast:not([aria-hidden="true"])').forEach(element => {
+      if (!toasts.has(element)) return;
+
+      const state = toasts.get(element);
+      if (state.remainingTime !== -1 && !state.timeoutId) {
+        if (state.remainingTime > 0) {
+          state.startTime = Date.now();
+          state.timeoutId = setTimeout(() => closeToast(element), state.remainingTime);
+        } else {
+          closeToast(element);
+        }
+      }
+    });
+  }
+
+  function closeToast(element) {
+    if (!element || !toasts.has(element)) return;
+
+    const state = toasts.get(element);
+    clearTimeout(state.timeoutId);
+    toasts.delete(element);
+
+    if (element.contains(document.activeElement)) document.activeElement.blur();
+    element.setAttribute('aria-hidden', 'true');
+    element.addEventListener('transitionend', () => element.remove(), { once: true });
+  }
+
+  const escapeHtml = (value) => String(value)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+
+  function createToast(config) {
+    const {
+      category = 'info',
+      title,
+      description,
+      action,
+      cancel,
+      duration,
+      icon,
+      html: allowHtml = false,
+    } = config;
+
+    // Text is escaped unless `html: true`. `icon` is always raw markup (SVG).
+    const text = (value) => (allowHtml ? String(value) : escapeHtml(value));
+
+    const iconHtml = icon || (category && ICONS[category]) || '';
+    const titleHtml = title ? `<h2>${text(title)}</h2>` : '';
+    const descriptionHtml = description ? `<p>${text(description)}</p>` : '';
+    const actionHtml = action?.href
+      ? `<a href="${escapeHtml(action.href)}" class="btn" data-toast-action>${text(action.label)}</a>`
+      : action?.onclick
+        ? `<button type="button" class="btn" data-toast-action onclick="${escapeHtml(action.onclick)}">${text(action.label)}</button>`
+        : '';
+    const cancelHtml = cancel
+      ? `<button type="button" class="btn h-6 text-xs px-2.5 rounded-sm" data-variant="outline" data-toast-cancel onclick="${escapeHtml(cancel?.onclick || '')}">${text(cancel.label)}</button>`
+      : '';
+
+    const footerHtml = actionHtml || cancelHtml ? `<footer>${actionHtml}${cancelHtml}</footer>` : '';
+
+    const html = `
+      <div
+        class="toast"
+        role="${category === 'error' ? 'alert' : 'status'}"
+        aria-atomic="true"
+        ${category ? `data-category="${escapeHtml(category)}"` : ''}
+        ${duration !== undefined ? `data-duration="${escapeHtml(duration)}"` : ''}
+      >
+        <div class="toast-content">
+          ${iconHtml}
+          <section>
+            ${titleHtml}
+            ${descriptionHtml}
+          </section>
+          ${footerHtml}
+        </div>
+      </div>
+    `;
+    const template = document.createElement('template');
+    template.innerHTML = html.trim();
+    return template.content.firstChild;
+  }
+
+  if (window.basecoat) {
+    window.basecoat.register('toaster', '#toaster:not([data-toaster-initialized])', initToaster);
+    window.basecoat.register('toast', '.toast:not([data-toast-initialized])', initToast);
+  }
+})();
+
+// Loaded after the DOM is ready: initialize now.
+if (document.readyState !== 'loading') { window.basecoat.initAll(); window.basecoat.start(); }

package/dist/ui/toggle-group.css

@@ -0,0 +1,42 @@
+/* @auvyx/ui toggle-group | order 58 */
+@layer components {
+  .toggle-group {
+      border-radius: var(--auvyx-r-control);
+    }
+  .toggle-group[data-variant='outline']:not([data-spacing]) {
+      --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);
+    }
+  .toggle-group:not([data-spacing]) > .toggle {
+      border-radius: 0;
+      padding-inline: calc(var(--spacing) * 2);
+      --tw-shadow: 0 0 #0000;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  .toggle-group:not([data-spacing]):not([data-orientation='vertical']) > .toggle {
+      &:first-of-type {
+        border-start-start-radius: var(--auvyx-r-control);
+        border-end-start-radius: var(--auvyx-r-control);
+      }
+      &:last-of-type {
+        border-start-end-radius: var(--auvyx-r-control);
+        border-end-end-radius: var(--auvyx-r-control);
+      }
+      &:not(:first-of-type) {
+        border-inline-start-width: 0;
+      }
+    }
+  .toggle-group:not([data-spacing])[data-orientation='vertical'] > .toggle {
+      &:first-of-type {
+        border-top-left-radius: var(--auvyx-r-control);
+        border-top-right-radius: var(--auvyx-r-control);
+      }
+      &:last-of-type {
+        border-bottom-right-radius: var(--auvyx-r-control);
+        border-bottom-left-radius: var(--auvyx-r-control);
+      }
+      &:not(:first-of-type) {
+        border-block-start-width: 0;
+      }
+    }
+}

package/dist/ui/toggle.css

@@ -0,0 +1,150 @@
+/* @auvyx/ui toggle | order 39 */
+@layer components {
+  .toggle {
+      position: relative;
+      display: inline-flex;
+      flex-shrink: 0;
+      cursor: pointer;
+      align-items: center;
+      justify-content: center;
+      white-space: nowrap;
+      --tw-outline-style: none;
+      outline-style: none;
+      -webkit-user-select: none;
+      user-select: none;
+      & svg {
+        pointer-events: none;
+      }
+      & svg {
+        flex-shrink: 0;
+      }
+      > input:is([type='checkbox'], [type='radio']) {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+        border-width: 0;
+      }
+      &:is(:disabled, [aria-disabled='true'], :has(> input:disabled)) {
+        pointer-events: none;
+        opacity: 50%;
+      }
+    }
+  .toggle-group {
+      margin: 0;
+      display: inline-flex;
+      width: fit-content;
+      min-width: 0;
+      align-items: center;
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+      padding: 0;
+      > legend {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+        border-width: 0;
+      }
+      > .toggle:is(:focus-visible, :has(> input:focus-visible)) {
+        z-index: 10;
+      }
+      &[data-orientation='vertical'] {
+        flex-direction: column;
+        align-items: stretch;
+      }
+      &[data-spacing='1'] {
+        gap: var(--spacing);
+      }
+      &[data-spacing='2'] {
+        gap: calc(var(--spacing) * 2);
+      }
+    }
+}
+
+@layer components {
+  .toggle {
+      height: calc(var(--spacing) * 9);
+      min-width: calc(var(--spacing) * 9);
+      gap: var(--spacing);
+      border-radius: var(--auvyx-r-control);
+      background-color: transparent;
+      padding-inline: calc(var(--spacing) * 2.5);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+      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));
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-muted);
+        }
+      }
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-foreground);
+        }
+      }
+      & svg:not([class*='size-']) {
+        width: calc(var(--spacing) * 4);
+        height: calc(var(--spacing) * 4);
+      }
+    }
+  .toggle:is([aria-pressed='true'], :has(> input:checked)) {
+      background-color: var(--color-muted);
+    }
+  .toggle:is(:focus-visible, :has(> input:focus-visible)) {
+      border-color: var(--color-ring);
+      --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);
+      --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);
+      }
+    }
+  .toggle:is([aria-invalid='true'], :has(> input[aria-invalid='true'])) {
+      border-color: var(--color-destructive);
+      --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);
+      }
+      &:is(html.dark *) {
+        --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);
+        }
+      }
+    }
+  .toggle[data-variant='outline'], .toggle-group[data-variant='outline'] > .toggle {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--color-input);
+      --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);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-muted);
+        }
+      }
+    }
+  .toggle[data-size='sm'], .toggle-group[data-size='sm'] > .toggle {
+      height: calc(var(--spacing) * 8);
+      min-width: calc(var(--spacing) * 8);
+      padding-inline: calc(var(--spacing) * 2.5);
+    }
+  .toggle[data-size='lg'], .toggle-group[data-size='lg'] > .toggle {
+      height: calc(var(--spacing) * 10);
+      min-width: calc(var(--spacing) * 10);
+      padding-inline: calc(var(--spacing) * 2.5);
+    }
+}