@auvyx/ui 0.0.0-stage → 0.1.0

package/dist/ui/accordion.css

@@ -0,0 +1,91 @@
+/* @auvyx/ui accordion | order 1 */
+@layer components {
+  .accordion {
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+    }
+  .accordion > details > summary {
+      position: relative;
+      display: flex;
+      width: 100%;
+      flex: 1;
+      cursor: pointer;
+      list-style-type: none;
+      align-items: flex-start;
+      justify-content: space-between;
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: transparent;
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  .accordion > details > summary > svg:last-child {
+      pointer-events: none;
+      flex-shrink: 0;
+      transition-property: transform, translate, scale, rotate;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  .accordion > details[open] > summary > svg:last-child {
+      rotate: 180deg;
+    }
+  .accordion > details[aria-disabled='true'] > summary, .accordion > details > summary[aria-disabled='true'] {
+      pointer-events: none;
+      opacity: 50%;
+    }
+  .accordion > details > :not(summary) {
+      overflow: hidden;
+    }
+}
+
+@layer components {
+  .accordion > details {
+      &:not(*:last-child) {
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-width: 1px;
+      }
+    }
+  .accordion > details > summary {
+      border-radius: var(--radius-md);
+      padding-block: calc(var(--spacing) * 4);
+      text-align: left;
+      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);
+      &:hover {
+        @media (hover: hover) {
+          text-decoration-line: underline;
+        }
+      }
+      &: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);
+        }
+      }
+    }
+  .accordion > details > summary > svg:last-child {
+      margin-inline-start: auto;
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+      color: var(--color-muted-foreground);
+    }
+  .accordion > details > :not(summary) {
+      padding-top: 0;
+      padding-bottom: calc(var(--spacing) * 4);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+}

package/dist/ui/accordion.js

@@ -0,0 +1,249 @@
+/* @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 = (details) => {
+    const summary = details.querySelector(':scope > summary');
+    return details.getAttribute('aria-disabled') === 'true'
+      || details.dataset.disabled === 'true'
+      || summary?.getAttribute('aria-disabled') === 'true';
+  };
+
+  const isMultiple = (root) => root.hasAttribute('data-multiple');
+
+  const closeSiblings = (root, activeDetails) => {
+    if (isMultiple(root) || !activeDetails.open) return;
+    root.querySelectorAll(':scope > details[open]').forEach((details) => {
+      if (details !== activeDetails) details.open = false;
+    });
+  };
+
+  const initAccordion = (root) => {
+    if (root.dataset.accordionInitialized) return;
+
+    const handleClick = (event) => {
+      const summary = event.target.closest('summary');
+      const details = summary?.closest('details');
+      if (!details || details.parentElement !== root || !isDisabled(details)) return;
+      event.preventDefault();
+    };
+
+    const handleKeydown = (event) => {
+      if (event.key !== 'Enter' && event.key !== ' ') return;
+      const summary = event.target.closest('summary');
+      const details = summary?.closest('details');
+      if (!details || details.parentElement !== root || !isDisabled(details)) return;
+      event.preventDefault();
+    };
+
+    const handleToggle = (event) => {
+      const details = event.target;
+      if (details.parentElement !== root) return;
+      if (isDisabled(details)) {
+        details.open = false;
+        return;
+      }
+      closeSiblings(root, details);
+    };
+
+    root.addEventListener('click', handleClick);
+    root.addEventListener('keydown', handleKeydown);
+    root.addEventListener('toggle', handleToggle, true);
+    root.querySelectorAll(':scope > details[open]').forEach((details) => closeSiblings(root, details));
+
+    states.set(root, { handleClick, handleToggle });
+    root._destroy = () => {
+      root.removeEventListener('click', handleClick);
+      root.removeEventListener('keydown', handleKeydown);
+      root.removeEventListener('toggle', handleToggle, true);
+      states.delete(root);
+    };
+
+    root.dataset.accordionInitialized = 'true';
+    root.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  if (window.basecoat) {
+    window.basecoat.register('accordion', '.accordion:not([data-accordion-initialized])', initAccordion);
+  }
+})();
+
+// Loaded after the DOM is ready: initialize now.
+if (document.readyState !== 'loading') { window.basecoat.initAll(); window.basecoat.start(); }

package/dist/ui/accordion.native.css

@@ -0,0 +1,24 @@
+/* @auvyx/ui accordion.native | order 62 */
+@layer components {
+  .accordion > details[inert] > summary {
+      opacity: 0.5;
+    }
+  @supports selector(::details-content) {
+      .accordion {
+        interpolate-size: allow-keywords;
+      }
+      .accordion > details::details-content {
+        block-size: 0;
+        overflow: hidden;
+        transition: block-size 200ms ease, content-visibility 200ms allow-discrete;
+      }
+      .accordion > details[open]::details-content {
+        block-size: auto;
+      }
+    }
+  @media (prefers-reduced-motion: reduce) {
+      .accordion > details::details-content {
+        transition: none;
+      }
+    }
+}

package/dist/ui/alert.css

@@ -0,0 +1,119 @@
+/* @auvyx/ui alert | order 2 */
+@layer components {
+  .alert {
+      position: relative;
+      width: 100%;
+    }
+  .alert:has(> footer) {
+      padding-inline-end: 4.5rem;
+    }
+  .alert > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
+      min-height: calc(var(--spacing) * 4);
+    }
+  .alert > section {
+      display: grid;
+      justify-items: start;
+      gap: var(--spacing);
+      :where(p, ul, ol) {
+        margin: 0;
+      }
+      :where(p, ul, ol):not(:last-child) {
+        margin-bottom: calc(var(--spacing) * 4);
+      }
+      ul {
+        list-style-position: inside;
+        list-style-type: disc;
+      }
+      ol {
+        list-style-position: inside;
+        list-style-type: decimal;
+      }
+    }
+  .alert > footer {
+      position: absolute;
+    }
+}
+
+@layer components {
+  .alert {
+      display: grid;
+      gap: calc(var(--spacing) * 0.5);
+      border-radius: var(--radius-lg);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      padding-inline: calc(var(--spacing) * 4);
+      padding-block: calc(var(--spacing) * 3);
+      text-align: start;
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      &:has(>svg) {
+        grid-template-columns: auto 1fr;
+      }
+      &:has(>svg) {
+        column-gap: calc(var(--spacing) * 2.5);
+      }
+      &>svg {
+        grid-row: span 2 / span 2;
+      }
+      &>svg {
+        --tw-translate-y: calc(var(--spacing) * 0.5);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+      &>svg {
+        color: currentcolor;
+      }
+      &>svg:not([class*='size-']) {
+        width: calc(var(--spacing) * 4);
+        height: calc(var(--spacing) * 4);
+      }
+    }
+  .alert {
+      background-color: var(--color-card);
+      color: var(--color-card-foreground);
+    }
+  .alert[data-variant='destructive'] {
+      background-color: var(--color-card);
+      color: var(--color-destructive);
+      &>svg {
+        color: currentcolor;
+      }
+    }
+  .alert > :is(h2, h3, h4, h5, h6, strong, [data-title]), .alert[data-variant='destructive'] > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+  .alert:has(> svg) > :is(h2, h3, h4, h5, h6, strong, [data-title]) {
+      grid-column-start: 2;
+    }
+  .alert > section {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      text-wrap: balance;
+      color: var(--color-muted-foreground);
+      @media (width >= 48rem) {
+        text-wrap: pretty;
+      }
+      & p:not(:last-child) {
+        margin-bottom: calc(var(--spacing) * 4);
+      }
+    }
+  .alert[data-variant='destructive'] > section {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      text-wrap: balance;
+      color: var(--color-destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, var(--color-destructive) 90%, transparent);
+      }
+      @media (width >= 48rem) {
+        text-wrap: pretty;
+      }
+      & p:not(:last-child) {
+        margin-bottom: calc(var(--spacing) * 4);
+      }
+    }
+  .alert > footer, .alert[data-variant='destructive'] > footer {
+      inset-inline-end: calc(var(--spacing) * 3);
+      top: calc(var(--spacing) * 2.5);
+    }
+}

package/dist/ui/aspect-ratio.css

@@ -0,0 +1,38 @@
+/* @auvyx/ui aspect-ratio | order 38 */
+@layer components {
+  .aspect-ratio {
+      position: relative;
+      width: 100%;
+      overflow: hidden;
+      --ratio: 16 / 9;
+      aspect-ratio: var(--ratio);
+      &[data-ratio='1/1'] {
+        --ratio: 1 / 1;
+      }
+      &[data-ratio='4/3'] {
+        --ratio: 4 / 3;
+      }
+      &[data-ratio='3/2'] {
+        --ratio: 3 / 2;
+      }
+      &[data-ratio='16/9'] {
+        --ratio: 16 / 9;
+      }
+      &[data-ratio='21/9'] {
+        --ratio: 21 / 9;
+      }
+      &[data-ratio='3/4'] {
+        --ratio: 3 / 4;
+      }
+      &[data-ratio='9/16'] {
+        --ratio: 9 / 16;
+      }
+      > :is(img, video, iframe, picture, canvas, svg) {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+}