sibujs 1.2.0 → 1.4.0

package/dist/ui.js

@@ -37,11 +37,10 @@ import {
   toast,
   withScopedStyle,
   zipMask
-} from "./chunk-BW3WT46K.js";
+} from "./chunk-JCI5M6U6.js";
 import {
   RenderProp,
   assertType,
-  composable,
   compose,
   createGuard,
   createSlots,
@@ -54,16 +53,235 @@ import {
   withDefaults,
   withProps,
   withWrapper
-} from "./chunk-XYU6TZOW.js";
-import "./chunk-23VV7YD3.js";
-import "./chunk-L6JRBDNS.js";
+} from "./chunk-CNZ35WI2.js";
+import {
+  createId
+} from "./chunk-YT6HQ6AM.js";
+import {
+  registerDisposer
+} from "./chunk-PTQJDMRT.js";
+import "./chunk-NEKUBFPT.js";
+import "./chunk-CMBFNA7L.js";
 import {
   effect
-} from "./chunk-6SA3QQES.js";
-import "./chunk-CHJ27IGK.js";
-import "./chunk-V2XTI523.js";
-import "./chunk-UNXCEF6S.js";
-import "./chunk-MLKGABMK.js";
+} from "./chunk-CHF5OHIA.js";
+import "./chunk-EUZND3CB.js";
+import {
+  signal
+} from "./chunk-WZSPOOER.js";
+import "./chunk-ZD6OAMTH.js";
+import "./chunk-5X6PP2UK.js";
+
+// src/ui/formAction.ts
+function formAction(fn) {
+  const [pending, setPending] = signal(false);
+  const [error, setError] = signal(null);
+  const [result, setResult] = signal(null);
+  let runId = 0;
+  async function run(...args) {
+    const currentId = ++runId;
+    setPending(true);
+    setError(null);
+    try {
+      const value = await fn(...args);
+      if (currentId !== runId) return;
+      setResult(value);
+    } catch (err) {
+      if (currentId !== runId) return;
+      setError(err);
+    } finally {
+      if (currentId === runId) setPending(false);
+    }
+  }
+  function reset() {
+    setError(null);
+    setResult(null);
+  }
+  function onSubmit(e) {
+    e.preventDefault();
+    const formEl = e.currentTarget;
+    if (!formEl || typeof FormData === "undefined") return;
+    const data = new FormData(formEl);
+    run(data);
+  }
+  return { run, pending, error, result, reset, onSubmit };
+}
+
+// src/ui/a11yPrimitives.ts
+var DEFAULT_FOCUS_SELECTOR = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+function createFocusManager(container, options = {}) {
+  const selector = options.selector ?? DEFAULT_FOCUS_SELECTOR;
+  const loop = options.loop ?? true;
+  function items() {
+    return Array.from(container.querySelectorAll(selector));
+  }
+  function focusFirst() {
+    const all = items();
+    if (all.length > 0) all[0].focus();
+  }
+  function focusLast() {
+    const all = items();
+    if (all.length > 0) all[all.length - 1].focus();
+  }
+  function focusNext() {
+    const all = items();
+    if (all.length === 0) return;
+    const idx = all.indexOf(document.activeElement);
+    if (idx === -1) {
+      all[0].focus();
+      return;
+    }
+    const next = idx + 1;
+    if (next >= all.length) {
+      if (loop) all[0].focus();
+      return;
+    }
+    all[next].focus();
+  }
+  function focusPrev() {
+    const all = items();
+    if (all.length === 0) return;
+    const idx = all.indexOf(document.activeElement);
+    if (idx === -1) {
+      all[all.length - 1].focus();
+      return;
+    }
+    const prev = idx - 1;
+    if (prev < 0) {
+      if (loop) all[all.length - 1].focus();
+      return;
+    }
+    all[prev].focus();
+  }
+  return { focusFirst, focusLast, focusNext, focusPrev, items };
+}
+function createListbox(container, options = {}) {
+  const multiple = options.multiple ?? false;
+  const optionSelector = options.optionSelector ?? '[role="option"]';
+  container.setAttribute("role", "listbox");
+  if (multiple) container.setAttribute("aria-multiselectable", "true");
+  if (!container.hasAttribute("tabindex")) container.setAttribute("tabindex", "0");
+  const [activeValue, setActiveValue] = signal(null);
+  const [selectedValue, setSelectedValue] = signal(null);
+  const [activeDescendantId, setActiveDescendantId] = signal(null);
+  function stampIds() {
+    const opts = Array.from(container.querySelectorAll(optionSelector));
+    for (const opt of opts) {
+      if (!opt.id) opt.id = createId("listbox-option");
+    }
+  }
+  stampIds();
+  function getOptions() {
+    return Array.from(container.querySelectorAll(optionSelector));
+  }
+  function setActive(value) {
+    setActiveValue(value);
+    const opts = getOptions();
+    for (const opt of opts) {
+      if (opt.dataset.value === value) {
+        opt.setAttribute("data-highlighted", "");
+        setActiveDescendantId(opt.id || null);
+        container.setAttribute("aria-activedescendant", opt.id || "");
+      } else {
+        opt.removeAttribute("data-highlighted");
+      }
+    }
+    if (value === null) {
+      setActiveDescendantId(null);
+      container.removeAttribute("aria-activedescendant");
+    }
+  }
+  function select(value) {
+    if (multiple) {
+      const current2 = selectedValue();
+      const set = new Set((current2 ?? "").split(",").filter(Boolean));
+      if (set.has(value)) set.delete(value);
+      else set.add(value);
+      setSelectedValue(Array.from(set).join(","));
+    } else {
+      setSelectedValue(value);
+    }
+    options.onSelect?.(value);
+    const opts = getOptions();
+    const current = selectedValue();
+    const selected = new Set((current ?? "").split(",").filter(Boolean));
+    for (const opt of opts) {
+      const ov = opt.dataset.value ?? "";
+      opt.setAttribute("aria-selected", selected.has(ov) ? "true" : "false");
+    }
+  }
+  function moveActive(delta) {
+    const opts = getOptions();
+    if (opts.length === 0) return;
+    const currentIdx = opts.findIndex((o) => o.dataset.value === activeValue());
+    let next = currentIdx + delta;
+    if (next < 0) next = opts.length - 1;
+    if (next >= opts.length) next = 0;
+    const nextValue = opts[next].dataset.value ?? null;
+    setActive(nextValue);
+    if (typeof opts[next].scrollIntoView === "function") {
+      opts[next].scrollIntoView({ block: "nearest" });
+    }
+  }
+  function onKeyDown(e) {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        moveActive(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        moveActive(-1);
+        break;
+      case "Home": {
+        e.preventDefault();
+        const opts = getOptions();
+        if (opts.length > 0) setActive(opts[0].dataset.value ?? null);
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        const opts = getOptions();
+        if (opts.length > 0) setActive(opts[opts.length - 1].dataset.value ?? null);
+        break;
+      }
+      case "Enter":
+      case " ": {
+        e.preventDefault();
+        const active = activeValue();
+        if (active !== null) select(active);
+        break;
+      }
+    }
+  }
+  function onClick(e) {
+    const target = e.target.closest(optionSelector);
+    if (!target || !container.contains(target)) return;
+    const value = target.dataset.value ?? null;
+    if (value !== null) {
+      setActive(value);
+      select(value);
+    }
+  }
+  container.addEventListener("keydown", onKeyDown);
+  container.addEventListener("click", onClick);
+  function dispose() {
+    container.removeEventListener("keydown", onKeyDown);
+    container.removeEventListener("click", onClick);
+  }
+  registerDisposer(container, dispose);
+  return { activeValue, selectedValue, activeDescendantId, dispose };
+}
+function createDialogAria(element, options = {}) {
+  const titleId = options.labelledBy ?? createId("dialog-title");
+  const descriptionId = options.describedBy ?? createId("dialog-desc");
+  element.setAttribute("role", options.alert ? "alertdialog" : "dialog");
+  if (options.modal ?? true) element.setAttribute("aria-modal", "true");
+  element.setAttribute("aria-labelledby", titleId);
+  element.setAttribute("aria-describedby", descriptionId);
+  if (!element.hasAttribute("tabindex")) element.setAttribute("tabindex", "-1");
+  return { titleId, descriptionId };
+}
 
 // src/ui/lazyEffect.ts
 function lazyEffect(element, effectFn, options) {
@@ -97,6 +315,99 @@ function lazyEffect(element, effectFn, options) {
     }
   };
 }
+
+// src/ui/timers.ts
+function interval(fn, ms) {
+  let id = null;
+  let running = false;
+  function start() {
+    if (running) return;
+    id = setInterval(fn, ms);
+    running = true;
+  }
+  function stop() {
+    if (id !== null) {
+      clearInterval(id);
+      id = null;
+    }
+    running = false;
+  }
+  start();
+  return {
+    stop,
+    pause: stop,
+    resume: start,
+    isRunning: () => running
+  };
+}
+function timeout(fn, ms) {
+  let pending = true;
+  const id = setTimeout(() => {
+    pending = false;
+    fn();
+  }, ms);
+  return {
+    cancel: () => {
+      if (pending) {
+        clearTimeout(id);
+        pending = false;
+      }
+    },
+    isPending: () => pending
+  };
+}
+
+// src/ui/hover.ts
+function hover(target) {
+  const [hovered, setHovered] = signal(false);
+  if (typeof window === "undefined") {
+    return { hovered, dispose: () => {
+    } };
+  }
+  const onEnter = () => setHovered(true);
+  const onLeave = () => setHovered(false);
+  target.addEventListener("pointerenter", onEnter);
+  target.addEventListener("pointerleave", onLeave);
+  function dispose() {
+    target.removeEventListener("pointerenter", onEnter);
+    target.removeEventListener("pointerleave", onLeave);
+  }
+  return { hovered, dispose };
+}
+
+// src/ui/scrollLock.ts
+var lockCount = 0;
+var savedOverflow = null;
+var savedPaddingRight = null;
+function scrollLock() {
+  let owned = false;
+  function lock() {
+    if (owned) return;
+    owned = true;
+    lockCount++;
+    if (lockCount !== 1 || typeof document === "undefined") return;
+    const body = document.body;
+    const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+    savedOverflow = body.style.overflow;
+    savedPaddingRight = body.style.paddingRight;
+    body.style.overflow = "hidden";
+    if (scrollBarWidth > 0) {
+      body.style.paddingRight = `${scrollBarWidth}px`;
+    }
+  }
+  function unlock() {
+    if (!owned) return;
+    owned = false;
+    lockCount = Math.max(0, lockCount - 1);
+    if (lockCount !== 0 || typeof document === "undefined") return;
+    const body = document.body;
+    body.style.overflow = savedOverflow ?? "";
+    body.style.paddingRight = savedPaddingRight ?? "";
+    savedOverflow = null;
+    savedPaddingRight = null;
+  }
+  return { lock, unlock };
+}
 export {
   FocusTrap,
   RenderProp,
@@ -108,9 +419,11 @@ export {
   bindBoolAttr,
   bindData,
   bindField,
-  composable,
   compose,
+  createDialogAria,
+  createFocusManager,
   createGuard,
+  createListbox,
   createSlots,
   creditCardMask,
   custom,
@@ -124,10 +437,13 @@ export {
   eventBus,
   focus,
   form,
+  formAction,
   hotkey,
+  hover,
   infiniteScroll,
   inputMask,
   intersection,
+  interval,
   lazyEffect,
   lazyLoad,
   matchesPattern,
@@ -140,9 +456,11 @@ export {
   removeScopedStyle,
   required,
   scopedStyle,
+  scrollLock,
   ssnMask,
   svgElement,
   timeMask,
+  timeout,
   toast,
   validateProps,
   validators,

package/dist/widgets.js

@@ -8,13 +8,13 @@ import {
   select,
   tabs,
   tooltip
-} from "./chunk-C6KFWOFV.js";
-import "./chunk-TNQWPPE6.js";
-import "./chunk-L6JRBDNS.js";
-import "./chunk-CHJ27IGK.js";
-import "./chunk-V2XTI523.js";
-import "./chunk-UNXCEF6S.js";
-import "./chunk-MLKGABMK.js";
+} from "./chunk-EBGIRKQY.js";
+import "./chunk-NYVAC6P5.js";
+import "./chunk-NEKUBFPT.js";
+import "./chunk-EUZND3CB.js";
+import "./chunk-WZSPOOER.js";
+import "./chunk-ZD6OAMTH.js";
+import "./chunk-5X6PP2UK.js";
 export {
   accordion,
   combobox,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sibujs",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "A lightweight, function-based frontend framework that combines the best of React, Svelte, and Vue — with zero VDOM and maximum simplicity. Designed for developers who want fine-grained reactivity and full control without compilation or magic.",
   "keywords": [
     "frontend",