@fluix-ui/vanilla 0.0.6 → 0.0.8

package/README.md

@@ -8,14 +8,105 @@ Vanilla JS adapter for Fluix UI components.
 npm install @fluix-ui/vanilla @fluix-ui/css
 ```
 
-## Usage
+## How imports work in Vanilla JS
+
+### Option A: npm + bundler (Vite/Webpack/Rollup)
+
+Use standard ESM imports in your source files:
+
+```ts
+import { createToaster, fluix } from "@fluix-ui/vanilla";
+import "@fluix-ui/css";
+```
+
+### Option B: browser without bundler (CDN + global)
+
+The IIFE build exposes a global `window.Fluix`.
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fluix-ui/css/dist/fluix.css" />
+<script src="https://cdn.jsdelivr.net/npm/@fluix-ui/vanilla/dist/index.global.js"></script>
+<script>
+  const { createToaster, fluix, createNotch, createMenu } = window.Fluix;
+  createToaster({ position: "top-right" });
+  fluix.success({ title: "Loaded" });
+</script>
+```
+
+## Quick start (Toasts)
 
 ```ts
 import { createToaster, fluix } from "@fluix-ui/vanilla";
 import "@fluix-ui/css";
+
+const toaster = createToaster({ position: "top-right", layout: "stack" });
+
+document.querySelector("#save-btn")?.addEventListener("click", () => {
+  fluix.success({
+    title: "Saved",
+    description: "Your changes were stored.",
+  });
+});
+```
+
+### Promise toasts
+
+```ts
+await fluix.promise(saveUser(), {
+  loading: { title: "Saving..." },
+  success: (data) => ({
+    title: "Saved",
+    description: `User ${data.name} updated`,
+  }),
+  error: (err) => ({
+    title: "Failed",
+    description: err instanceof Error ? err.message : "Unexpected error",
+  }),
+});
 ```
 
-### Custom themes
+## Notch
+
+```ts
+import { createNotch } from "@fluix-ui/vanilla";
+
+const container = document.querySelector("#notch-root");
+if (!container) throw new Error("Missing #notch-root");
+
+const notch = createNotch(container, {
+  position: "top-center",
+  trigger: "click",
+  theme: "dark",
+  pill: "Now",
+  content: "Now playing: Fluix Theme",
+});
+
+notch.open();
+```
+
+## Menu
+
+```ts
+import { createMenu } from "@fluix-ui/vanilla";
+
+const container = document.querySelector("#menu-root");
+if (!container) throw new Error("Missing #menu-root");
+
+const menu = createMenu(container, {
+  activeId: "home",
+  orientation: "horizontal",
+  variant: "pill",
+  theme: "dark",
+  fill: "#6366f1", // custom indicator color
+  items: [
+    { id: "home", label: "Home" },
+    { id: "projects", label: "Projects" },
+    { id: "settings", label: "Settings" },
+  ],
+});
+```
+
+## Theming
 
 Pass any theme name — themes are pure CSS. See `@fluix-ui/css` for details.
 
@@ -23,6 +114,20 @@ Pass any theme name — themes are pure CSS. See `@fluix-ui/css` for details.
 fluix.success({ title: "Done", theme: "midnight" });
 ```
 
+## Exports
+
+```ts
+import { createToaster, createNotch, createMenu, fluix } from "@fluix-ui/vanilla";
+import type {
+  NotchOptions,
+  MenuOptions,
+  MenuInstance,
+  MenuItemConfig,
+  FluixToastOptions,
+  FluixToasterConfig,
+} from "@fluix-ui/vanilla";
+```
+
 ## Docs
 
 - Official docs: https://fluix.ivanlopezdev.es

package/dist/index.cjs

@@ -1236,11 +1236,257 @@ 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 = core.MENU_DEFAULTS.orientation,
+    variant = "pill",
+    theme = "dark",
+    activeId: controlledActiveId,
+    onActiveChange,
+    spring,
+    roundness = core.MENU_DEFAULTS.roundness,
+    blur: blurProp,
+    fill,
+    items
+  } = options;
+  const springConfig = () => spring ?? core.FLUIX_SPRING;
+  const resolvedBlur = () => blurProp ?? Math.min(10, Math.max(6, roundness * 0.45));
+  const machine = core.createMenuMachine({
+    orientation,
+    variant,
+    spring,
+    roundness,
+    blur: blurProp,
+    fill,
+    initialActiveId: controlledActiveId ?? null
+  });
+  let snapshot = machine.store.getSnapshot();
+  let lastActiveNotified = snapshot.activeId;
+  const attrs = core.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.style.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.style.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 = core.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 = core.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 = core.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();
+    }
+  };
+}
 
 Object.defineProperty(exports, "fluix", {
   enumerable: true,
   get: function () { return core.fluix; }
 });
+exports.createMenu = createMenu;
 exports.createNotch = createNotch;
 exports.createToaster = createToaster;
 //# sourceMappingURL=index.cjs.map