@fluix-ui/vanilla 0.0.5 → 0.0.6

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Toaster, TOAST_DEFAULTS, animateSpring, FLUIX_SPRING } from '@fluix-ui/core';
+import { Toaster, NOTCH_DEFAULTS, createNotchMachine, getNotchAttrs, animateSpring, FLUIX_SPRING, TOAST_DEFAULTS } from '@fluix-ui/core';
 export { fluix } from '@fluix-ui/core';
 
 // src/index.ts
@@ -781,7 +781,461 @@ function createToaster(config) {
     }
   };
 }
+var SVG_NS2 = "http://www.w3.org/2000/svg";
+function applyAttrs2(el, attrs) {
+  for (const [key, value] of Object.entries(attrs)) {
+    el.setAttribute(key, value);
+  }
+}
+function resolveContent(source) {
+  if (source instanceof HTMLElement) return source;
+  const span = document.createElement("span");
+  span.textContent = source;
+  return span;
+}
+function createNotch(container, options) {
+  let {
+    trigger = "click",
+    position = "top-center",
+    spring,
+    dotSize = 36,
+    roundness = NOTCH_DEFAULTS.roundness,
+    theme = "dark",
+    fill,
+    open: controlledOpen,
+    onOpenChange
+  } = options;
+  const springConfig = () => spring ?? FLUIX_SPRING;
+  const machine = createNotchMachine({
+    position,
+    trigger,
+    roundness,
+    fill,
+    spring
+  });
+  let snapshot = machine.store.getSnapshot();
+  let prevOpenVal;
+  const blur = () => Math.min(10, Math.max(6, roundness * 0.45));
+  const collapsedW = () => dotSize;
+  const collapsedH = () => dotSize;
+  let contentSize = { w: 200, h: 44 };
+  const hlPad = 12;
+  const expandedW = () => contentSize.w + hlPad * 2;
+  const expandedH = () => Math.max(contentSize.h + hlPad, dotSize);
+  const targetW = () => snapshot.open ? expandedW() : collapsedW();
+  const targetH = () => snapshot.open ? expandedH() : collapsedH();
+  const rootW = () => Math.max(expandedW(), collapsedW());
+  const rootH = () => Math.max(expandedH(), collapsedH());
+  const prev = { w: 0, h: 0, initialized: false };
+  let currentAnim = null;
+  let highlightAnim = null;
+  const hlPrev = { x: 0, y: 0, w: 0, h: 0, visible: false };
+  const measureEl = document.createElement("div");
+  measureEl.setAttribute("data-fluix-notch-measure", "");
+  measureEl.appendChild(resolveContent(options.content).cloneNode(true));
+  container.appendChild(measureEl);
+  const rootEl = document.createElement("div");
+  const attrs = getNotchAttrs({ open: snapshot.open, position, theme });
+  applyAttrs2(rootEl, attrs.root);
+  rootEl.style.width = `${rootW()}px`;
+  rootEl.style.height = `${rootH()}px`;
+  const canvasDiv = document.createElement("div");
+  applyAttrs2(canvasDiv, attrs.canvas);
+  const svg = document.createElementNS(SVG_NS2, "svg");
+  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  svg.setAttribute("width", String(rootW()));
+  svg.setAttribute("height", String(rootH()));
+  svg.setAttribute("viewBox", `0 0 ${rootW()} ${rootH()}`);
+  svg.setAttribute("aria-hidden", "true");
+  const defs = document.createElementNS(SVG_NS2, "defs");
+  const filter = document.createElementNS(SVG_NS2, "filter");
+  filter.setAttribute("id", "fluix-notch-goo");
+  filter.setAttribute("x", "-20%");
+  filter.setAttribute("y", "-20%");
+  filter.setAttribute("width", "140%");
+  filter.setAttribute("height", "140%");
+  filter.setAttribute("color-interpolation-filters", "sRGB");
+  const feBlur = document.createElementNS(SVG_NS2, "feGaussianBlur");
+  feBlur.setAttribute("in", "SourceGraphic");
+  feBlur.setAttribute("stdDeviation", String(blur()));
+  feBlur.setAttribute("result", "blur");
+  const feCM = document.createElementNS(SVG_NS2, "feColorMatrix");
+  feCM.setAttribute("in", "blur");
+  feCM.setAttribute("type", "matrix");
+  feCM.setAttribute("values", "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10");
+  feCM.setAttribute("result", "goo");
+  const feComp = document.createElementNS(SVG_NS2, "feComposite");
+  feComp.setAttribute("in", "SourceGraphic");
+  feComp.setAttribute("in2", "goo");
+  feComp.setAttribute("operator", "atop");
+  filter.appendChild(feBlur);
+  filter.appendChild(feCM);
+  filter.appendChild(feComp);
+  defs.appendChild(filter);
+  svg.appendChild(defs);
+  const gGroup = document.createElementNS(SVG_NS2, "g");
+  gGroup.setAttribute("filter", "url(#fluix-notch-goo)");
+  const svgRectEl = document.createElementNS(SVG_NS2, "rect");
+  const cw = collapsedW();
+  const ch = collapsedH();
+  svgRectEl.setAttribute("x", String((rootW() - cw) / 2));
+  svgRectEl.setAttribute("y", String((rootH() - ch) / 2));
+  svgRectEl.setAttribute("width", String(cw));
+  svgRectEl.setAttribute("height", String(ch));
+  svgRectEl.setAttribute("rx", String(cw / 2));
+  svgRectEl.setAttribute("ry", String(ch / 2));
+  svgRectEl.setAttribute("fill", fill ?? "var(--fluix-notch-bg)");
+  gGroup.appendChild(svgRectEl);
+  svg.appendChild(gGroup);
+  const hoverBlobEl = document.createElementNS(SVG_NS2, "rect");
+  hoverBlobEl.setAttribute("x", String((rootW() - cw) / 2));
+  hoverBlobEl.setAttribute("y", String((rootH() - ch) / 2));
+  hoverBlobEl.setAttribute("width", "0");
+  hoverBlobEl.setAttribute("height", "0");
+  hoverBlobEl.setAttribute("rx", "0");
+  hoverBlobEl.setAttribute("ry", "0");
+  hoverBlobEl.setAttribute("opacity", "0");
+  hoverBlobEl.setAttribute("fill", fill ?? "var(--fluix-notch-bg)");
+  gGroup.appendChild(hoverBlobEl);
+  canvasDiv.appendChild(svg);
+  rootEl.appendChild(canvasDiv);
+  const pillDiv = document.createElement("div");
+  applyAttrs2(pillDiv, attrs.pill);
+  pillDiv.style.width = `${dotSize}px`;
+  pillDiv.style.height = `${dotSize}px`;
+  pillDiv.appendChild(resolveContent(options.pill));
+  rootEl.appendChild(pillDiv);
+  const contentDiv = document.createElement("div");
+  applyAttrs2(contentDiv, attrs.content);
+  contentDiv.appendChild(resolveContent(options.content));
+  rootEl.appendChild(contentDiv);
+  container.appendChild(rootEl);
+  prev.w = cw;
+  prev.h = ch;
+  prev.initialized = true;
+  let measureRaf = 0;
+  const measureObs = new ResizeObserver(() => {
+    cancelAnimationFrame(measureRaf);
+    measureRaf = requestAnimationFrame(() => {
+      const r = measureEl.getBoundingClientRect();
+      if (r.width > 0 && r.height > 0) {
+        const newSize = { w: Math.ceil(r.width), h: Math.ceil(r.height) };
+        if (newSize.w !== contentSize.w || newSize.h !== contentSize.h) {
+          contentSize = newSize;
+          updateLayout();
+        }
+      }
+    });
+  });
+  measureObs.observe(measureEl);
+  function onItemEnter(e) {
+    const target = e.target.closest("a, button");
+    if (!target || !snapshot.open) return;
+    const rootRect = rootEl.getBoundingClientRect();
+    const itemW = target.offsetWidth;
+    const itemH = target.offsetHeight;
+    const itemRect = target.getBoundingClientRect();
+    const itemCenterX = itemRect.left + itemRect.width / 2;
+    const itemCenterY = itemRect.top + itemRect.height / 2;
+    const padX = 8;
+    const padY = 4;
+    const blobOvershoot = Math.max(6, roundness * 0.35);
+    const toW = itemW + padX * 2;
+    const toH = Math.max(itemH + padY * 2, rootRect.height + blobOvershoot * 2);
+    const toX = itemCenterX - rootRect.left - toW / 2;
+    const toY = itemCenterY - rootRect.top - toH / 2;
+    const toRx = toH / 2;
+    const fromX = hlPrev.visible ? hlPrev.x : toX + toW / 2;
+    const fromY = hlPrev.visible ? hlPrev.y : toY + toH / 2;
+    const fromW = hlPrev.visible ? hlPrev.w : 0;
+    const fromH = hlPrev.visible ? hlPrev.h : 0;
+    const fromR = hlPrev.visible ? hlPrev.h / 2 : 0;
+    if (highlightAnim) {
+      highlightAnim.cancel();
+      highlightAnim = null;
+    }
+    const sc = springConfig();
+    const a = animateSpring(
+      hoverBlobEl,
+      {
+        x: { from: fromX, to: toX, unit: "px" },
+        y: { from: fromY, to: toY, unit: "px" },
+        width: { from: fromW, to: toW, unit: "px" },
+        height: { from: fromH, to: toH, unit: "px" },
+        rx: { from: fromR, to: toRx, unit: "px" },
+        ry: { from: fromR, to: toRx, unit: "px" }
+      },
+      { ...sc, stiffness: (sc.stiffness ?? 300) * 1.2 }
+    );
+    hlPrev.x = toX;
+    hlPrev.y = toY;
+    hlPrev.w = toW;
+    hlPrev.h = toH;
+    if (a) {
+      highlightAnim = a;
+      a.onfinish = () => {
+        highlightAnim = null;
+        hoverBlobEl.setAttribute("x", String(toX));
+        hoverBlobEl.setAttribute("y", String(toY));
+        hoverBlobEl.setAttribute("width", String(toW));
+        hoverBlobEl.setAttribute("height", String(toH));
+        hoverBlobEl.setAttribute("rx", String(toRx));
+        hoverBlobEl.setAttribute("ry", String(toRx));
+        hoverBlobEl.setAttribute("opacity", "1");
+      };
+    } else {
+      hoverBlobEl.setAttribute("x", String(toX));
+      hoverBlobEl.setAttribute("y", String(toY));
+      hoverBlobEl.setAttribute("width", String(toW));
+      hoverBlobEl.setAttribute("height", String(toH));
+      hoverBlobEl.setAttribute("rx", String(toRx));
+      hoverBlobEl.setAttribute("ry", String(toRx));
+      hoverBlobEl.setAttribute("opacity", "1");
+    }
+    hoverBlobEl.setAttribute("opacity", "1");
+    hlPrev.visible = true;
+  }
+  function resetHoverBlobImmediate() {
+    if (highlightAnim) {
+      highlightAnim.cancel();
+      highlightAnim = null;
+    }
+    hoverBlobEl.setAttribute("x", String(rootW() / 2));
+    hoverBlobEl.setAttribute("y", String(rootH() / 2));
+    hoverBlobEl.setAttribute("width", "0");
+    hoverBlobEl.setAttribute("height", "0");
+    hoverBlobEl.setAttribute("rx", "0");
+    hoverBlobEl.setAttribute("ry", "0");
+    hoverBlobEl.setAttribute("opacity", "0");
+    hlPrev.visible = false;
+  }
+  function onItemLeave() {
+    if (!hlPrev.visible) return;
+    const cx = hlPrev.x + hlPrev.w / 2;
+    const cy = hlPrev.y + hlPrev.h / 2;
+    const sc = springConfig();
+    const a = animateSpring(
+      hoverBlobEl,
+      {
+        x: { from: hlPrev.x, to: cx, unit: "px" },
+        y: { from: hlPrev.y, to: cy, unit: "px" },
+        width: { from: hlPrev.w, to: 0, unit: "px" },
+        height: { from: hlPrev.h, to: 0, unit: "px" },
+        rx: { from: hlPrev.h / 2, to: 0, unit: "px" },
+        ry: { from: hlPrev.h / 2, to: 0, unit: "px" }
+      },
+      { ...sc, stiffness: (sc.stiffness ?? 300) * 1.2 }
+    );
+    if (a) {
+      highlightAnim = a;
+      a.onfinish = () => {
+        highlightAnim = null;
+        hoverBlobEl.setAttribute("x", String(cx));
+        hoverBlobEl.setAttribute("y", String(cy));
+        hoverBlobEl.setAttribute("width", "0");
+        hoverBlobEl.setAttribute("height", "0");
+        hoverBlobEl.setAttribute("rx", "0");
+        hoverBlobEl.setAttribute("ry", "0");
+        hoverBlobEl.setAttribute("opacity", "0");
+      };
+    } else {
+      hoverBlobEl.setAttribute("x", String(cx));
+      hoverBlobEl.setAttribute("y", String(cy));
+      hoverBlobEl.setAttribute("width", "0");
+      hoverBlobEl.setAttribute("height", "0");
+      hoverBlobEl.setAttribute("rx", "0");
+      hoverBlobEl.setAttribute("ry", "0");
+      hoverBlobEl.setAttribute("opacity", "0");
+    }
+    hlPrev.visible = false;
+  }
+  function handleOpen() {
+    if (controlledOpen === void 0) machine.open();
+    else onOpenChange?.(true);
+  }
+  function handleClose() {
+    if (controlledOpen === void 0) machine.close();
+    else onOpenChange?.(false);
+  }
+  function handleToggle() {
+    if (controlledOpen === void 0) machine.toggle();
+    else onOpenChange?.(!snapshot.open);
+  }
+  function onMouseEnter() {
+    if (trigger === "hover") handleOpen();
+  }
+  function onMouseLeave() {
+    if (trigger === "hover") {
+      handleClose();
+      resetHoverBlobImmediate();
+      return;
+    }
+    onItemLeave();
+  }
+  function onClick() {
+    if (trigger === "click") handleToggle();
+  }
+  rootEl.addEventListener("mouseenter", onMouseEnter);
+  rootEl.addEventListener("mouseleave", onMouseLeave);
+  rootEl.addEventListener("mouseover", onItemEnter);
+  rootEl.addEventListener("click", onClick);
+  function animateRect() {
+    const tw = targetW();
+    const th = targetH();
+    if (tw === prev.w && th === prev.h) return;
+    if (currentAnim) {
+      currentAnim.cancel();
+      currentAnim = null;
+    }
+    const rw = rootW();
+    const rh = rootH();
+    const fromW = prev.w;
+    const fromH = prev.h;
+    const fromX = (rw - fromW) / 2;
+    const fromY = (rh - fromH) / 2;
+    const toX = (rw - tw) / 2;
+    const toY = (rh - th) / 2;
+    prev.w = tw;
+    prev.h = th;
+    const isCollapsing = tw === collapsedW() && th === collapsedH();
+    const wasCollapsed = fromW === collapsedW() && fromH === collapsedH();
+    const fromRx = wasCollapsed ? collapsedW() / 2 : roundness;
+    const toRx = isCollapsing ? collapsedW() / 2 : roundness;
+    const a = animateSpring(
+      svgRectEl,
+      {
+        width: { from: fromW, to: tw, unit: "px" },
+        height: { from: fromH, to: th, unit: "px" },
+        x: { from: fromX, to: toX, unit: "px" },
+        y: { from: fromY, to: toY, unit: "px" },
+        rx: { from: fromRx, to: toRx, unit: "px" },
+        ry: { from: fromRx, to: toRx, unit: "px" }
+      },
+      springConfig()
+    );
+    if (a) {
+      currentAnim = a;
+      a.onfinish = () => {
+        currentAnim = null;
+        svgRectEl.setAttribute("width", String(tw));
+        svgRectEl.setAttribute("height", String(th));
+        svgRectEl.setAttribute("x", String(toX));
+        svgRectEl.setAttribute("y", String(toY));
+        svgRectEl.setAttribute("rx", String(toRx));
+        svgRectEl.setAttribute("ry", String(toRx));
+      };
+    } else {
+      svgRectEl.setAttribute("width", String(tw));
+      svgRectEl.setAttribute("height", String(th));
+      svgRectEl.setAttribute("x", String(toX));
+      svgRectEl.setAttribute("y", String(toY));
+      svgRectEl.setAttribute("rx", String(toRx));
+      svgRectEl.setAttribute("ry", String(toRx));
+    }
+  }
+  function updateLayout() {
+    const isOpen = snapshot.open;
+    const newAttrs = getNotchAttrs({ open: isOpen, position, theme });
+    applyAttrs2(rootEl, newAttrs.root);
+    rootEl.style.width = `${rootW()}px`;
+    rootEl.style.height = `${rootH()}px`;
+    svg.setAttribute("width", String(rootW()));
+    svg.setAttribute("height", String(rootH()));
+    svg.setAttribute("viewBox", `0 0 ${rootW()} ${rootH()}`);
+    feBlur.setAttribute("stdDeviation", String(blur()));
+    svgRectEl.setAttribute("fill", fill ?? "var(--fluix-notch-bg)");
+    hoverBlobEl.setAttribute("fill", fill ?? "var(--fluix-notch-bg)");
+    applyAttrs2(contentDiv, newAttrs.content);
+    animateRect();
+    if (!isOpen) {
+      resetHoverBlobImmediate();
+    }
+    document.documentElement.style.setProperty(
+      "--fluix-notch-offset",
+      `${rootH()}px`
+    );
+  }
+  const unsubscribe = machine.store.subscribe(() => {
+    const next = machine.store.getSnapshot();
+    snapshot = next;
+    if (controlledOpen !== void 0) {
+      if (controlledOpen && !next.open) machine.open();
+      else if (!controlledOpen && next.open) machine.close();
+    }
+    if (prevOpenVal !== void 0 && prevOpenVal !== next.open) {
+      onOpenChange?.(next.open);
+    }
+    prevOpenVal = next.open;
+    updateLayout();
+  });
+  updateLayout();
+  document.documentElement.style.setProperty(
+    "--fluix-notch-offset",
+    `${rootH()}px`
+  );
+  return {
+    open() {
+      handleOpen();
+    },
+    close() {
+      handleClose();
+    },
+    toggle() {
+      handleToggle();
+    },
+    destroy() {
+      unsubscribe();
+      cancelAnimationFrame(measureRaf);
+      measureObs.disconnect();
+      currentAnim?.cancel();
+      highlightAnim?.cancel();
+      rootEl.removeEventListener("mouseenter", onMouseEnter);
+      rootEl.removeEventListener("mouseleave", onMouseLeave);
+      rootEl.removeEventListener("mouseover", onItemEnter);
+      rootEl.removeEventListener("click", onClick);
+      machine.destroy();
+      measureEl.remove();
+      rootEl.remove();
+      document.documentElement.style.removeProperty("--fluix-notch-offset");
+    },
+    update(opts) {
+      if (opts.trigger !== void 0) trigger = opts.trigger;
+      if (opts.position !== void 0) position = opts.position;
+      if (opts.spring !== void 0) spring = opts.spring;
+      if (opts.dotSize !== void 0) dotSize = opts.dotSize;
+      if (opts.roundness !== void 0) roundness = opts.roundness;
+      if (opts.theme !== void 0) theme = opts.theme;
+      if (opts.fill !== void 0) fill = opts.fill;
+      if (opts.open !== void 0) controlledOpen = opts.open;
+      if (opts.onOpenChange !== void 0) onOpenChange = opts.onOpenChange;
+      if (opts.pill !== void 0) {
+        pillDiv.textContent = "";
+        pillDiv.appendChild(resolveContent(opts.pill));
+      }
+      if (opts.content !== void 0) {
+        contentDiv.textContent = "";
+        contentDiv.appendChild(resolveContent(opts.content));
+        measureEl.textContent = "";
+        measureEl.appendChild(resolveContent(opts.content).cloneNode(true));
+      }
+      pillDiv.style.width = `${dotSize}px`;
+      pillDiv.style.height = `${dotSize}px`;
+      machine.configure({ position, trigger, roundness, fill, spring });
+      if (controlledOpen !== void 0) {
+        if (controlledOpen && !snapshot.open) machine.open();
+        else if (!controlledOpen && snapshot.open) machine.close();
+      }
+      rootEl.removeEventListener("mouseenter", onMouseEnter);
+      rootEl.removeEventListener("mouseleave", onMouseLeave);
+      rootEl.removeEventListener("click", onClick);
+      rootEl.addEventListener("mouseenter", onMouseEnter);
+      rootEl.addEventListener("mouseleave", onMouseLeave);
+      rootEl.addEventListener("click", onClick);
+      updateLayout();
+    }
+  };
+}
 
-export { createToaster };
+export { createNotch, createToaster };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map