@fluix-ui/vanilla 0.0.6 → 0.0.7

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Toaster, NOTCH_DEFAULTS, createNotchMachine, getNotchAttrs, animateSpring, FLUIX_SPRING, TOAST_DEFAULTS } from '@fluix-ui/core';
+import { Toaster, NOTCH_DEFAULTS, createNotchMachine, getNotchAttrs, MENU_DEFAULTS, createMenuMachine, getMenuAttrs, connectMenu, FLUIX_SPRING, animateSpring, TOAST_DEFAULTS } from '@fluix-ui/core';
 export { fluix } from '@fluix-ui/core';
 
 // src/index.ts
@@ -1235,7 +1235,252 @@ function createNotch(container, options) {
     }
   };
 }
+var SVG_NS3 = "http://www.w3.org/2000/svg";
+var GOO_MATRIX = "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10";
+function applyAttrs3(el, attrs) {
+  for (const [key, value] of Object.entries(attrs)) {
+    el.setAttribute(key, value);
+  }
+}
+function createMenu(container, options) {
+  let {
+    orientation = MENU_DEFAULTS.orientation,
+    variant = "pill",
+    theme = "dark",
+    activeId: controlledActiveId,
+    onActiveChange,
+    spring,
+    roundness = MENU_DEFAULTS.roundness,
+    blur: blurProp,
+    fill,
+    items
+  } = options;
+  const springConfig = () => spring ?? FLUIX_SPRING;
+  const resolvedBlur = () => blurProp ?? Math.min(10, Math.max(6, roundness * 0.45));
+  const machine = createMenuMachine({
+    orientation,
+    variant,
+    spring,
+    roundness,
+    blur: blurProp,
+    fill,
+    initialActiveId: controlledActiveId ?? null
+  });
+  let snapshot = machine.store.getSnapshot();
+  let lastActiveNotified = snapshot.activeId;
+  const attrs = getMenuAttrs({ orientation, theme, variant });
+  const filterId = `fluix-menu-goo-${Math.random().toString(36).slice(2, 8)}`;
+  const isTab = variant === "tab";
+  const navEl = document.createElement("nav");
+  applyAttrs3(navEl, attrs.root);
+  navEl.setAttribute("aria-label", "Fluix menu");
+  const canvasDiv = document.createElement("div");
+  applyAttrs3(canvasDiv, attrs.canvas);
+  const svg = document.createElementNS(SVG_NS3, "svg");
+  svg.setAttribute("xmlns", SVG_NS3);
+  svg.setAttribute("width", "1");
+  svg.setAttribute("height", "1");
+  svg.setAttribute("viewBox", "0 0 1 1");
+  svg.setAttribute("aria-hidden", "true");
+  let indicatorEl;
+  if (isTab) {
+    indicatorEl = document.createElementNS(SVG_NS3, "path");
+    applyAttrs3(indicatorEl, attrs.indicator);
+    indicatorEl.setAttribute("d", "");
+    indicatorEl.setAttribute("opacity", "0");
+    indicatorEl.setAttribute("fill", fill ?? "var(--fluix-menu-indicator)");
+    svg.appendChild(indicatorEl);
+  } else {
+    const defs = document.createElementNS(SVG_NS3, "defs");
+    const filter = document.createElementNS(SVG_NS3, "filter");
+    filter.setAttribute("id", filterId);
+    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_NS3, "feGaussianBlur");
+    feBlur.setAttribute("in", "SourceGraphic");
+    feBlur.setAttribute("stdDeviation", String(resolvedBlur()));
+    feBlur.setAttribute("result", "blur");
+    const feCM = document.createElementNS(SVG_NS3, "feColorMatrix");
+    feCM.setAttribute("in", "blur");
+    feCM.setAttribute("type", "matrix");
+    feCM.setAttribute("values", GOO_MATRIX);
+    feCM.setAttribute("result", "goo");
+    const feComp = document.createElementNS(SVG_NS3, "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_NS3, "g");
+    gGroup.setAttribute("filter", `url(#${filterId})`);
+    indicatorEl = document.createElementNS(SVG_NS3, "rect");
+    applyAttrs3(indicatorEl, attrs.indicator);
+    indicatorEl.setAttribute("x", "0");
+    indicatorEl.setAttribute("y", "0");
+    indicatorEl.setAttribute("width", "0");
+    indicatorEl.setAttribute("height", "0");
+    indicatorEl.setAttribute("rx", "0");
+    indicatorEl.setAttribute("ry", "0");
+    indicatorEl.setAttribute("opacity", "0");
+    indicatorEl.setAttribute("fill", fill ?? "var(--fluix-menu-indicator)");
+    gGroup.appendChild(indicatorEl);
+    svg.appendChild(gGroup);
+  }
+  canvasDiv.appendChild(svg);
+  navEl.appendChild(canvasDiv);
+  const listDiv = document.createElement("div");
+  applyAttrs3(listDiv, attrs.list);
+  const buttonMap = /* @__PURE__ */ new Map();
+  function createItemButton(item) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    const active = snapshot.activeId === item.id;
+    const itemAttrs = attrs.item({ id: item.id, active, disabled: item.disabled });
+    applyAttrs3(btn, itemAttrs);
+    if (item.disabled) btn.disabled = true;
+    btn.textContent = item.label;
+    btn.addEventListener("click", () => {
+      if (item.disabled) return;
+      if (controlledActiveId === void 0) {
+        machine.setActive(item.id);
+      } else {
+        onActiveChange?.(item.id);
+      }
+    });
+    buttonMap.set(item.id, btn);
+    listDiv.appendChild(btn);
+  }
+  for (const item of items) {
+    createItemButton(item);
+  }
+  navEl.appendChild(listDiv);
+  container.appendChild(navEl);
+  let size = { width: 0, height: 0 };
+  let measureRaf = 0;
+  const measure = () => {
+    const rect = navEl.getBoundingClientRect();
+    const w = Math.ceil(rect.width);
+    const h = Math.ceil(rect.height);
+    if (size.width !== w || size.height !== h) {
+      size = { width: w, height: h };
+      updateSvgSize();
+      connection?.sync(false);
+    }
+  };
+  const resizeObs = new ResizeObserver(() => {
+    cancelAnimationFrame(measureRaf);
+    measureRaf = requestAnimationFrame(measure);
+  });
+  resizeObs.observe(navEl);
+  function updateSvgSize() {
+    const w = Math.max(1, size.width);
+    const h = Math.max(1, size.height);
+    svg.setAttribute("width", String(w));
+    svg.setAttribute("height", String(h));
+    svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
+  }
+  let connection = connectMenu({
+    root: navEl,
+    indicator: indicatorEl,
+    getActiveId: () => snapshot.activeId,
+    onSelect(id) {
+      if (controlledActiveId === void 0) {
+        machine.setActive(id);
+      } else {
+        onActiveChange?.(id);
+      }
+    },
+    spring: springConfig(),
+    variant,
+    orientation
+  });
+  requestAnimationFrame(() => {
+    measure();
+    connection.sync(false);
+  });
+  const unsubscribe = machine.store.subscribe(() => {
+    const next = machine.store.getSnapshot();
+    snapshot = next;
+    for (const item of items) {
+      const btn = buttonMap.get(item.id);
+      if (btn) {
+        const active = next.activeId === item.id;
+        const itemAttrs = attrs.item({ id: item.id, active, disabled: item.disabled });
+        applyAttrs3(btn, itemAttrs);
+      }
+    }
+    if (next.activeId && lastActiveNotified !== next.activeId && onActiveChange) {
+      onActiveChange(next.activeId);
+    }
+    lastActiveNotified = next.activeId;
+    connection.sync(false);
+  });
+  return {
+    setActive(id) {
+      machine.setActive(id);
+    },
+    update(opts) {
+      if (opts.orientation !== void 0) orientation = opts.orientation;
+      if (opts.variant !== void 0) variant = opts.variant;
+      if (opts.theme !== void 0) theme = opts.theme;
+      if (opts.activeId !== void 0) controlledActiveId = opts.activeId;
+      if (opts.onActiveChange !== void 0) onActiveChange = opts.onActiveChange;
+      if (opts.spring !== void 0) spring = opts.spring;
+      if (opts.roundness !== void 0) roundness = opts.roundness;
+      if (opts.blur !== void 0) blurProp = opts.blur;
+      if (opts.fill !== void 0) fill = opts.fill;
+      machine.configure({ orientation, variant, spring, roundness, blur: blurProp, fill });
+      if (controlledActiveId !== void 0) {
+        machine.setActive(controlledActiveId ?? null);
+      }
+      const newAttrs = getMenuAttrs({ orientation, theme, variant });
+      applyAttrs3(navEl, newAttrs.root);
+      if (opts.items !== void 0) {
+        items = opts.items;
+        listDiv.innerHTML = "";
+        buttonMap.clear();
+        for (const item of items) {
+          createItemButton(item);
+        }
+      }
+      connection.destroy();
+      connection = connectMenu({
+        root: navEl,
+        indicator: indicatorEl,
+        getActiveId: () => snapshot.activeId,
+        onSelect(id) {
+          if (controlledActiveId === void 0) {
+            machine.setActive(id);
+          } else {
+            onActiveChange?.(id);
+          }
+        },
+        spring: springConfig(),
+        variant,
+        orientation
+      });
+      requestAnimationFrame(() => {
+        measure();
+        connection.sync(false);
+      });
+    },
+    destroy() {
+      unsubscribe();
+      cancelAnimationFrame(measureRaf);
+      resizeObs.disconnect();
+      connection.destroy();
+      machine.destroy();
+      navEl.remove();
+    }
+  };
+}
 
-export { createNotch, createToaster };
+export { createMenu, createNotch, createToaster };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map