@studiocms/ui 0.4.16 → 1.0.0-beta.0

package/dist/components/Tooltip/tooltip.css

@@ -0,0 +1,187 @@
+.sui-tooltip-container {
+  display: block;
+}
+.sui-tooltip-container.inline {
+  display: inline-block;
+}
+.sui-tooltip-popup {
+  position: absolute;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  visibility: hidden;
+  border-radius: var(--radius-md);
+  padding: 0.5rem 1rem;
+  min-width: 250px;
+  pointer-events: none;
+}
+.sui-tooltip-popup[data-visible=true] {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: all;
+}
+.sui-tooltip-popup.variant-default,
+.sui-tooltip-popup.variant-outlined {
+  border-style: solid;
+  border-width: 1px;
+}
+.sui-tooltip-popup.color-default {
+  background-color: var(--background-step-3);
+  color: var(--text-normal);
+  border-color: var(--border);
+}
+.sui-tooltip-popup.color-primary {
+  background-color: var(--primary-base);
+  color: var(--text-inverted);
+  border-color: var(--primary-hover);
+}
+.sui-tooltip-popup.color-success {
+  background-color: var(--success-base);
+  color: var(--text-dark);
+  border-color: var(--success-hover);
+}
+.sui-tooltip-popup.color-warning {
+  background-color: var(--warning-base);
+  color: var(--text-dark);
+  border-color: var(--warning-hover);
+}
+.sui-tooltip-popup.color-danger {
+  background-color: var(--danger-base);
+  color: var(--text-light);
+  border-color: var(--danger-hover);
+}
+.sui-tooltip-popup.color-info {
+  background-color: var(--info-base);
+  color: var(--text-light);
+  border-color: var(--info-hover);
+}
+.sui-tooltip-popup.color-mono {
+  background-color: var(--mono-base);
+  color: var(--text-inverted);
+  border-color: var(--mono-hover);
+}
+.sui-tooltip-popup.color-default.variant-outlined {
+  border-color: var(--text-muted);
+  background-color: var(--default-base);
+}
+.sui-tooltip-popup.color-primary.variant-outlined {
+  border-color: var(--primary-hover);
+  background-color: var(--default-base);
+}
+.sui-tooltip-popup.color-success.variant-outlined {
+  border-color: var(--success-hover);
+  background-color: var(--default-base);
+}
+.sui-tooltip-popup.color-warning.variant-outlined {
+  border-color: var(--warning-hover);
+  background-color: var(--default-base);
+}
+.sui-tooltip-popup.color-danger.variant-outlined {
+  border-color: var(--danger-hover);
+  background-color: var(--default-base);
+}
+.sui-tooltip-popup.color-info.variant-outlined {
+  border-color: var(--info-hover);
+  background-color: var(--default-base);
+}
+.sui-tooltip-popup.color-mono.variant-outlined {
+  border-color: var(--mono-hover);
+  background-color: var(--default-base);
+}
+.sui-tooltip-popup.animate {
+  transition: opacity 0.2s ease-out, visibility 0.2s;
+}
+.sui-tooltip-pointer {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  z-index: 999;
+  background-color: var(--background-step-3);
+  border: solid 1px var(--border);
+}
+.sui-tooltip-popup.variant-default .sui-tooltip-pointer,
+.sui-tooltip-popup.variant-outlined .sui-tooltip-pointer {
+  border-style: solid;
+  border-width: 1px;
+}
+.sui-tooltip-popup.color-default .sui-tooltip-pointer {
+  background-color: var(--background-step-3);
+  border-color: var(--border);
+}
+.sui-tooltip-popup.color-primary .sui-tooltip-pointer {
+  background-color: var(--primary-base);
+  border-color: var(--primary-hover);
+}
+.sui-tooltip-popup.color-success .sui-tooltip-pointer {
+  background-color: var(--success-base);
+  border-color: var(--success-hover);
+}
+.sui-tooltip-popup.color-warning .sui-tooltip-pointer {
+  background-color: var(--warning-base);
+  border-color: var(--warning-hover);
+}
+.sui-tooltip-popup.color-danger .sui-tooltip-pointer {
+  background-color: var(--danger-base);
+  border-color: var(--danger-hover);
+}
+.sui-tooltip-popup.color-info .sui-tooltip-pointer {
+  background-color: var(--info-base);
+  border-color: var(--info-hover);
+}
+.sui-tooltip-popup.color-mono .sui-tooltip-pointer {
+  background-color: var(--mono-base);
+  border-color: var(--mono-hover);
+}
+.sui-tooltip-popup.color-default.variant-outlined .sui-tooltip-pointer {
+  border-color: var(--text-muted);
+  background-color: var(--default-base);
+}
+.sui-tooltip-popup.color-primary.variant-outlined .sui-tooltip-pointer {
+  border-color: var(--primary-hover);
+  background-color: var(--default-base);
+}
+.sui-tooltip-popup.color-success.variant-outlined .sui-tooltip-pointer {
+  border-color: var(--success-hover);
+}
+.sui-tooltip-popup.color-warning.variant-outlined .sui-tooltip-pointer {
+  border-color: var(--warning-hover);
+  background-color: var(--default-base);
+}
+.sui-tooltip-popup.color-danger.variant-outlined .sui-tooltip-pointer {
+  border-color: var(--danger-hover);
+  background-color: var(--default-base);
+}
+.sui-tooltip-popup.color-info.variant-outlined .sui-tooltip-pointer {
+  border-color: var(--info-hover);
+  background-color: var(--default-base);
+}
+.sui-tooltip-popup.color-mono.variant-outlined .sui-tooltip-pointer {
+  border-color: var(--mono-hover);
+  background-color: var(--default-base);
+}
+.sui-tooltip-popup.top .sui-tooltip-pointer {
+  bottom: -9px;
+  transform: rotateZ(45deg);
+  border-left: none;
+  border-top: none;
+}
+.sui-tooltip-popup.bottom .sui-tooltip-pointer {
+  top: -9px;
+  transform: rotateZ(45deg);
+  border-bottom: none;
+  border-right: none;
+}
+.sui-tooltip-popup.left .sui-tooltip-pointer {
+  right: -9px;
+  transform: rotateZ(45deg);
+  border-bottom: none;
+  border-left: none;
+}
+.sui-tooltip-popup.right .sui-tooltip-pointer {
+  left: -9px;
+  transform: rotateZ(45deg);
+  border-top: none;
+  border-right: none;
+}

package/dist/components/Tooltip/tooltip.d.ts

@@ -0,0 +1,46 @@
+type Position = 'auto' | 'top' | 'bottom' | 'left' | 'right';
+type Point = {
+    x: number;
+    y: number;
+};
+interface TooltipOptions {
+    position: Position;
+    defaultOpen?: boolean;
+    gap?: number;
+    enterDelay?: number;
+    exitDelay?: number;
+    hoverOnly?: boolean;
+    animate?: boolean;
+    pointer?: boolean;
+}
+declare class Tooltip {
+    #private;
+    container: HTMLElement;
+    anchor: HTMLElement;
+    tooltip: HTMLElement;
+    options: TooltipOptions;
+    resizeObserver: ResizeObserver | null;
+    throttleUpdate: () => void;
+    rafId: number | null;
+    offset: number;
+    isSticky: boolean;
+    edgePadding: number;
+    constructor(container: HTMLElement | null);
+    processOptionsFromAttributes(): TooltipOptions;
+    update(): void;
+    bindEvents(): void;
+    updatePosition(): void;
+    updatePointer(position: Position | 'overlap', anchorCenter: Point, tooltipPosition: Point, tooltipWidth: number, tooltipHeight: number): void;
+    determinePosition(anchorRect: DOMRect, tooltipWidth: number, tooltipHeight: number): Position | 'overlap';
+    isAnchorInViewport(anchorRect: DOMRect): boolean;
+    applyViewportConstraints(x: number, y: number, width: number, height: number): Point;
+    throttle(fn: (...args: unknown[]) => void, delay: number): () => void;
+    show(): void;
+    hide(): void;
+    getAnchor(): HTMLElement;
+    isHoverOnly(): boolean;
+    setSticky(sticky: boolean): void;
+    isDefaultOpen(): boolean;
+    destroy(): void;
+}
+declare function loadTooltips(): void;

package/dist/components/Tooltip/tooltip.js

@@ -0,0 +1,330 @@
+class Tooltip {
+  container;
+  anchor;
+  tooltip;
+  options;
+  resizeObserver = null;
+  throttleUpdate;
+  rafId = null;
+  offset;
+  isSticky = false;
+  edgePadding = 8;
+  constructor(container) {
+    if (!container) {
+      throw new Error("Tooltip: Container element is required.");
+    }
+    this.container = container;
+    this.anchor = container.querySelector("[data-sui-tooltip-anchor]");
+    this.tooltip = container.querySelector("[data-sui-tooltip-popup]");
+    this.options = this.processOptionsFromAttributes();
+    this.offset = this.options.gap ?? 8;
+    this.throttleUpdate = this.throttle(() => this.update(), 16);
+    this.#init();
+  }
+  processOptionsFromAttributes() {
+    const jsonOptions = this.container.getAttribute("data-sui-tooltip-options");
+    let options = {
+      position: "auto",
+      enterDelay: 0,
+      exitDelay: 0,
+      hoverOnly: false,
+      animate: true,
+      pointer: true
+    };
+    try {
+      const parsedOptions = jsonOptions ? JSON.parse(jsonOptions) : {};
+      options = { ...options, ...parsedOptions };
+    } catch {
+    }
+    return options;
+  }
+  #init() {
+    this.update();
+    this.bindEvents();
+    this.container.dataset.initialized = "true";
+  }
+  update() {
+    if (this.rafId) cancelAnimationFrame(this.rafId);
+    this.rafId = requestAnimationFrame(() => this.updatePosition());
+  }
+  bindEvents() {
+    window.addEventListener("resize", this.throttleUpdate);
+    if (window.ResizeObserver) {
+      this.resizeObserver = new ResizeObserver(() => this.update());
+      this.resizeObserver.observe(this.tooltip);
+      this.resizeObserver.observe(this.anchor);
+    }
+  }
+  updatePosition() {
+    const anchorRect = this.anchor.getBoundingClientRect();
+    const tooltipWidth = this.tooltip.offsetWidth;
+    const tooltipHeight = this.tooltip.offsetHeight;
+    const position = this.determinePosition(anchorRect, tooltipWidth, tooltipHeight);
+    for (const p of ["top", "bottom", "left", "right", "overlap"]) {
+      this.tooltip.classList.toggle(p, p === position);
+    }
+    let x = null;
+    let y = null;
+    const anchorCenter = {
+      x: anchorRect.left + window.scrollX + anchorRect.width / 2,
+      y: anchorRect.top + window.scrollY + anchorRect.height / 2
+    };
+    switch (position) {
+      case "top": {
+        x = anchorCenter.x - tooltipWidth / 2;
+        y = anchorRect.top + window.scrollY - tooltipHeight - this.offset;
+        break;
+      }
+      case "bottom": {
+        x = anchorCenter.x - tooltipWidth / 2;
+        y = anchorRect.bottom + window.scrollY + this.offset;
+        break;
+      }
+      case "left": {
+        x = anchorRect.left + window.scrollX - tooltipWidth - 12;
+        y = anchorCenter.y - tooltipHeight / 2;
+        break;
+      }
+      case "right": {
+        x = anchorRect.right + window.scrollX + 12;
+        y = anchorCenter.y - tooltipHeight / 2;
+        break;
+      }
+      default: {
+        x = anchorCenter.x - tooltipWidth / 2;
+        y = anchorRect.top + window.scrollY - tooltipHeight - this.offset;
+        break;
+      }
+    }
+    let finalPosition;
+    const anchorIsVisible = this.isAnchorInViewport(anchorRect);
+    if (anchorIsVisible) {
+      finalPosition = this.applyViewportConstraints(x, y, tooltipWidth, tooltipHeight);
+    } else {
+      finalPosition = { x, y };
+    }
+    this.tooltip.style.left = `${finalPosition.x}px`;
+    this.tooltip.style.top = `${finalPosition.y}px`;
+    if (this.options.pointer) {
+      this.updatePointer(position, anchorCenter, finalPosition, tooltipWidth, tooltipHeight);
+    }
+  }
+  updatePointer(position, anchorCenter, tooltipPosition, tooltipWidth, tooltipHeight) {
+    const arrow = this.tooltip.querySelector(".sui-tooltip-pointer");
+    if (!arrow) return;
+    arrow.style.left = "";
+    arrow.style.top = "";
+    const arrowSize = 8;
+    if (position === "top" || position === "bottom") {
+      const arrowLeft = anchorCenter.x - tooltipPosition.x - arrowSize;
+      const min = arrowSize;
+      const max = tooltipWidth - arrowSize * 2;
+      arrow.style.left = `${Math.max(min, Math.min(arrowLeft, max))}px`;
+    } else if (position === "left" || position === "right") {
+      const arrowTop = anchorCenter.y - tooltipPosition.y - arrowSize;
+      const min = arrowSize;
+      const max = tooltipHeight - arrowSize * 2;
+      arrow.style.top = `${Math.max(min, Math.min(arrowTop, max))}px`;
+    }
+  }
+  determinePosition(anchorRect, tooltipWidth, tooltipHeight) {
+    const position = this.options.position;
+    const anchor = anchorRect;
+    const space = {
+      top: anchor.top - this.offset - this.edgePadding,
+      bottom: window.innerHeight - anchor.bottom - this.offset - this.edgePadding,
+      left: anchor.left - this.offset - this.edgePadding,
+      right: window.innerWidth - anchor.right - this.offset - this.edgePadding
+    };
+    const canFit = {
+      top: space.top >= tooltipHeight,
+      bottom: space.bottom >= tooltipHeight,
+      left: space.left >= tooltipWidth,
+      right: space.right >= tooltipWidth
+    };
+    const positionHierarchy = {
+      top: ["top", "bottom", "right", "left"],
+      bottom: ["bottom", "top", "right", "left"],
+      left: ["left", "right", "top", "bottom"],
+      right: ["right", "left", "top", "bottom"],
+      auto: ["top", "bottom", "right", "left"]
+    };
+    const priority = positionHierarchy[position] || positionHierarchy.auto;
+    for (const pos of priority) {
+      if (canFit[pos]) {
+        return pos;
+      }
+    }
+    return "overlap";
+  }
+  isAnchorInViewport(anchorRect) {
+    return anchorRect.top < window.innerHeight && anchorRect.bottom > 0 && anchorRect.left < window.innerWidth && anchorRect.right > 0;
+  }
+  applyViewportConstraints(x, y, width, height) {
+    const minX = this.edgePadding + window.scrollX;
+    const maxX = window.innerWidth - width - this.edgePadding + window.scrollX;
+    const finalX = Math.max(minX, Math.min(x, maxX));
+    const minY = this.edgePadding + window.scrollY;
+    const maxY = window.innerHeight - height - this.edgePadding + window.scrollY;
+    const finalY = Math.max(minY, Math.min(y, maxY));
+    return {
+      x: finalX,
+      y: finalY
+    };
+  }
+  throttle(fn, delay) {
+    let timeoutId = 0;
+    let lastExecTime = 0;
+    return (...args) => {
+      const currentTime = Date.now();
+      const timeSinceLastExec = currentTime - lastExecTime;
+      clearTimeout(timeoutId);
+      if (timeSinceLastExec >= delay) {
+        fn.apply(this, args);
+        lastExecTime = currentTime;
+      } else {
+        timeoutId = window.setTimeout(() => {
+          fn.apply(this, args);
+          lastExecTime = Date.now();
+        }, delay - timeSinceLastExec);
+      }
+    };
+  }
+  show() {
+    this.tooltip.setAttribute("data-visible", "true");
+    this.anchor.setAttribute("aria-describedby", this.tooltip.id);
+    this.update();
+  }
+  hide() {
+    this.tooltip.removeAttribute("data-visible");
+    this.anchor.removeAttribute("aria-describedby");
+  }
+  getAnchor() {
+    return this.anchor;
+  }
+  isHoverOnly() {
+    return this.options.hoverOnly ?? false;
+  }
+  setSticky(sticky) {
+    this.isSticky = sticky;
+  }
+  isDefaultOpen() {
+    return this.options.defaultOpen ?? false;
+  }
+  destroy() {
+    window.removeEventListener("resize", this.throttleUpdate);
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+    if (this.rafId) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    this.anchor.removeAttribute("aria-describedby");
+  }
+}
+function loadTooltips() {
+  const allTooltipElements = document.querySelectorAll(
+    ".sui-tooltip-container[data-sui-tooltip]"
+  );
+  let activeTooltip = null;
+  let enterTimeout;
+  let exitTimeout;
+  const show = (tooltipInstance, immediate = false) => {
+    clearTimeout(exitTimeout);
+    const delay = immediate ? 0 : tooltipInstance.options.enterDelay;
+    enterTimeout = window.setTimeout(() => {
+      if (activeTooltip && activeTooltip !== tooltipInstance) {
+        activeTooltip.hide();
+        activeTooltip.setSticky(false);
+      }
+      tooltipInstance.show();
+      activeTooltip = tooltipInstance;
+    }, delay);
+  };
+  const hide = (tooltipInstance) => {
+    clearTimeout(enterTimeout);
+    exitTimeout = window.setTimeout(() => {
+      tooltipInstance.hide();
+      tooltipInstance.setSticky(false);
+      if (activeTooltip === tooltipInstance) {
+        activeTooltip = null;
+      }
+    }, tooltipInstance.options.exitDelay);
+  };
+  for (const element of allTooltipElements) {
+    if (element.dataset.initialized) continue;
+    const tooltipInstance = new Tooltip(element);
+    const anchor = tooltipInstance.getAnchor();
+    const popup = tooltipInstance.tooltip;
+    window.sui.tooltips.instances.set(tooltipInstance.container.id, tooltipInstance);
+    anchor.addEventListener("mouseenter", () => {
+      if (!tooltipInstance.isSticky) {
+        show(tooltipInstance);
+      }
+    });
+    anchor.addEventListener("focus", () => {
+      if (!tooltipInstance.isSticky) {
+        show(tooltipInstance);
+      }
+    });
+    anchor.addEventListener("mouseleave", () => {
+      if (!tooltipInstance.isSticky) {
+        hide(tooltipInstance);
+      }
+    });
+    anchor.addEventListener("blur", () => {
+      if (!tooltipInstance.isSticky) {
+        hide(tooltipInstance);
+      }
+    });
+    anchor.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (tooltipInstance.isSticky) {
+        hide(tooltipInstance);
+      } else {
+        show(tooltipInstance);
+        tooltipInstance.setSticky(true);
+      }
+    });
+    popup.addEventListener("mouseenter", () => clearTimeout(exitTimeout));
+    popup.addEventListener("mouseleave", () => {
+      if (!tooltipInstance.isSticky) {
+        hide(tooltipInstance);
+      }
+    });
+    if (tooltipInstance.isDefaultOpen()) {
+      show(tooltipInstance, true);
+      tooltipInstance.setSticky(true);
+    }
+  }
+  document.addEventListener("click", (e) => {
+    if (activeTooltip?.isSticky && !activeTooltip.getAnchor().contains(e.target) && !activeTooltip.tooltip.contains(e.target)) {
+      hide(activeTooltip);
+    }
+  });
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && activeTooltip) {
+      hide(activeTooltip);
+    }
+  });
+}
+window.sui = window.sui ?? {};
+window.sui.tooltips = {
+  instances: /* @__PURE__ */ new Map(),
+  get: function(id) {
+    return this.instances.get(id);
+  },
+  show: function(id) {
+    const instance = this.get(id);
+    if (instance) {
+      instance.show();
+      instance.setSticky(true);
+    }
+  },
+  hide: function(id) {
+    this.get(id)?.hide();
+  }
+};
+document.addEventListener("astro:page-load", loadTooltips);

package/dist/components/User/User.astro

@@ -37,7 +37,7 @@ const { name, description, avatar, class: className, loading = 'lazy' } = Astro.
     {avatar ? (
       <Image src={avatar} inferSize loading={loading} alt={name} class="sui-avatar-img" />
     ) : (
-      <Icon name='user' width={24} height={24} role='img' aria-label={`Placeholder avatar for ${name}`} />
+      <Icon name='heroicons:user' width={24} height={24} role='img' aria-label={`Placeholder avatar for ${name}`} />
     )}
   </div>
   <div class="sui-text-content">

package/dist/components/User/user.css

@@ -7,13 +7,13 @@
 .sui-avatar-container {
   width: 2.5rem;
   height: 2.5rem;
-  background-color: hsl(var(--default-base));
+  background-color: var(--default-base);
   border-radius: var(--radius-full);
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  border: 1px solid hsl(var(--border));
+  border: 1px solid var(--border);
 }
 .sui-avatar-img {
   width: 100%;
@@ -31,5 +31,5 @@
 .sui-description {
   font-size: .875em;
   font-weight: 400;
-  color: hsl(var(--text-muted));
+  color: var(--text-muted);
 }