sibujs 1.0.0-beta.1

package/dist/widgets.js

@@ -0,0 +1,545 @@
+import {
+  derived
+} from "./chunk-2ABBWCGC.js";
+import "./chunk-MJNB47HB.js";
+import {
+  batch,
+  signal
+} from "./chunk-M5GNLDEO.js";
+import "./chunk-MLKGABMK.js";
+
+// src/widgets/Combobox.ts
+function combobox(options) {
+  const { items, filterFn, itemToString } = options;
+  const defaultFilterFn = (item, q) => {
+    const str = itemToString ? itemToString(item) : String(item);
+    return str.toLowerCase().includes(q.toLowerCase());
+  };
+  const filter = filterFn ?? defaultFilterFn;
+  const [query, setQuery] = signal("");
+  const [selectedItem, setSelectedItem] = signal(null);
+  const [highlightedIndex, setHighlightedIndex] = signal(-1);
+  const [isOpen, setIsOpen] = signal(false);
+  const filteredItems = derived(() => {
+    const q = query();
+    if (q === "") return items;
+    return items.filter((item) => filter(item, q));
+  });
+  function select2(item) {
+    batch(() => {
+      setSelectedItem(item);
+      const str = itemToString ? itemToString(item) : String(item);
+      setQuery(str);
+      setIsOpen(false);
+    });
+  }
+  function highlightNext() {
+    const filtered = filteredItems();
+    if (filtered.length === 0) return;
+    setHighlightedIndex((prev) => {
+      const next = prev + 1;
+      return next >= filtered.length ? 0 : next;
+    });
+  }
+  function highlightPrev() {
+    const filtered = filteredItems();
+    if (filtered.length === 0) return;
+    setHighlightedIndex((prev) => {
+      const next = prev - 1;
+      return next < 0 ? filtered.length - 1 : next;
+    });
+  }
+  function selectHighlighted() {
+    const filtered = filteredItems();
+    const idx = highlightedIndex();
+    if (idx >= 0 && idx < filtered.length) {
+      select2(filtered[idx]);
+    }
+  }
+  function open() {
+    setIsOpen(true);
+  }
+  function close() {
+    setIsOpen(false);
+  }
+  return {
+    query,
+    setQuery,
+    filteredItems,
+    selectedItem,
+    select: select2,
+    highlightedIndex,
+    highlightNext,
+    highlightPrev,
+    selectHighlighted,
+    isOpen,
+    open,
+    close
+  };
+}
+
+// src/widgets/Tabs.ts
+function tabs(options) {
+  const { tabs: tabDefs, defaultTab } = options;
+  const initialTab = defaultTab ?? tabDefs.find((t) => !t.disabled)?.id ?? tabDefs[0]?.id ?? "";
+  const [activeTab, setActiveTabState] = signal(initialTab);
+  function setActiveTab(id) {
+    const tab = tabDefs.find((t) => t.id === id);
+    if (tab && !tab.disabled) {
+      setActiveTabState(id);
+    }
+  }
+  const tabs2 = derived(
+    () => tabDefs.map((t) => ({
+      ...t,
+      isActive: t.id === activeTab()
+    }))
+  );
+  function findCurrentIndex() {
+    return tabDefs.findIndex((t) => t.id === activeTab());
+  }
+  function nextTab() {
+    const currentIdx = findCurrentIndex();
+    const len = tabDefs.length;
+    if (len === 0) return;
+    for (let i = 1; i <= len; i++) {
+      const candidate = tabDefs[(currentIdx + i) % len];
+      if (!candidate.disabled) {
+        setActiveTabState(candidate.id);
+        return;
+      }
+    }
+  }
+  function prevTab() {
+    const currentIdx = findCurrentIndex();
+    const len = tabDefs.length;
+    if (len === 0) return;
+    for (let i = 1; i <= len; i++) {
+      const candidate = tabDefs[(currentIdx - i + len) % len];
+      if (!candidate.disabled) {
+        setActiveTabState(candidate.id);
+        return;
+      }
+    }
+  }
+  return {
+    activeTab,
+    setActiveTab,
+    tabs: tabs2,
+    nextTab,
+    prevTab
+  };
+}
+
+// src/widgets/Accordion.ts
+function accordion(options) {
+  const { items: itemDefs, multiple = false, defaultExpanded = [] } = options;
+  const [expandedIds, setExpandedIds] = signal(new Set(defaultExpanded));
+  const items = derived(
+    () => itemDefs.map((item) => ({
+      ...item,
+      isExpanded: expandedIds().has(item.id)
+    }))
+  );
+  function expand(id) {
+    if (!itemDefs.some((item) => item.id === id)) return;
+    if (multiple) {
+      setExpandedIds((prev) => {
+        const next = new Set(prev);
+        next.add(id);
+        return next;
+      });
+    } else {
+      setExpandedIds(/* @__PURE__ */ new Set([id]));
+    }
+  }
+  function collapse(id) {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      next.delete(id);
+      return next;
+    });
+  }
+  function toggle(id) {
+    if (expandedIds().has(id)) {
+      collapse(id);
+    } else {
+      expand(id);
+    }
+  }
+  function expandAll() {
+    if (multiple) {
+      setExpandedIds(new Set(itemDefs.map((item) => item.id)));
+    }
+  }
+  function collapseAll() {
+    setExpandedIds(/* @__PURE__ */ new Set());
+  }
+  return {
+    items,
+    toggle,
+    expand,
+    collapse,
+    expandAll,
+    collapseAll
+  };
+}
+
+// src/widgets/Popover.ts
+function popover() {
+  const [isOpen, setIsOpen] = signal(false);
+  function open() {
+    setIsOpen(true);
+  }
+  function close() {
+    setIsOpen(false);
+  }
+  function toggle() {
+    setIsOpen((prev) => !prev);
+  }
+  return { isOpen, open, close, toggle };
+}
+
+// src/widgets/Select.ts
+function select(options) {
+  const { items, multiple = false } = options;
+  const [selectedItems, setSelectedItems] = signal([]);
+  const [isOpen, setIsOpen] = signal(false);
+  const [highlightedIndex, setHighlightedIndex] = signal(-1);
+  const selectedItem = derived(() => {
+    const sel = selectedItems();
+    return sel.length > 0 ? sel[sel.length - 1] : null;
+  });
+  function select2(item) {
+    if (multiple) {
+      setSelectedItems((prev) => {
+        if (prev.includes(item)) return prev;
+        return [...prev, item];
+      });
+    } else {
+      batch(() => {
+        setSelectedItems([item]);
+        setIsOpen(false);
+      });
+    }
+  }
+  function deselect(item) {
+    setSelectedItems((prev) => prev.filter((i) => i !== item));
+  }
+  function toggle(item) {
+    if (selectedItems().includes(item)) {
+      deselect(item);
+    } else {
+      select2(item);
+    }
+  }
+  function isSelected(item) {
+    return selectedItems().includes(item);
+  }
+  function open() {
+    setIsOpen(true);
+  }
+  function close() {
+    setIsOpen(false);
+  }
+  function highlightNext() {
+    if (items.length === 0) return;
+    setHighlightedIndex((prev) => {
+      const next = prev + 1;
+      return next >= items.length ? 0 : next;
+    });
+  }
+  function highlightPrev() {
+    if (items.length === 0) return;
+    setHighlightedIndex((prev) => {
+      const next = prev - 1;
+      return next < 0 ? items.length - 1 : next;
+    });
+  }
+  function selectHighlighted() {
+    const idx = highlightedIndex();
+    if (idx >= 0 && idx < items.length) {
+      select2(items[idx]);
+    }
+  }
+  function clear() {
+    setSelectedItems([]);
+  }
+  return {
+    selectedItems,
+    selectedItem,
+    select: select2,
+    deselect,
+    toggle,
+    isSelected,
+    isOpen,
+    open,
+    close,
+    highlightedIndex,
+    highlightNext,
+    highlightPrev,
+    selectHighlighted,
+    clear
+  };
+}
+
+// src/widgets/Tooltip.ts
+function tooltip(options) {
+  const delay = options?.delay ?? 0;
+  const [isVisible, setIsVisible] = signal(false);
+  const [content, setContent] = signal("");
+  let delayTimer = null;
+  function show() {
+    if (delay > 0) {
+      if (delayTimer !== null) {
+        clearTimeout(delayTimer);
+      }
+      delayTimer = setTimeout(() => {
+        setIsVisible(true);
+        delayTimer = null;
+      }, delay);
+    } else {
+      setIsVisible(true);
+    }
+  }
+  function hide() {
+    if (delayTimer !== null) {
+      clearTimeout(delayTimer);
+      delayTimer = null;
+    }
+    setIsVisible(false);
+  }
+  return { isVisible, show, hide, content, setContent };
+}
+
+// src/widgets/FileUpload.ts
+function fileUpload(options) {
+  const accept = options?.accept;
+  const multiple = options?.multiple ?? false;
+  const maxSize = options?.maxSize;
+  const onFiles = options?.onFiles;
+  const [files, setFiles] = signal([]);
+  const [errors, setErrors] = signal([]);
+  const [isDragOver, setDragOver] = signal(false);
+  function isAccepted(file) {
+    if (!accept) return true;
+    const acceptedTypes = accept.split(",").map((t) => t.trim().toLowerCase());
+    const fileName = file.name.toLowerCase();
+    const fileType = file.type.toLowerCase();
+    return acceptedTypes.some((pattern) => {
+      if (pattern.startsWith(".")) {
+        return fileName.endsWith(pattern);
+      }
+      if (pattern.endsWith("/*")) {
+        const prefix = pattern.slice(0, pattern.indexOf("/"));
+        return fileType.startsWith(`${prefix}/`);
+      }
+      return fileType === pattern;
+    });
+  }
+  function addFiles(fileList) {
+    const incoming = Array.from(fileList);
+    const validFiles = [];
+    const newErrors = [];
+    for (const file of incoming) {
+      if (!isAccepted(file)) {
+        newErrors.push(`File "${file.name}" is not an accepted type`);
+        continue;
+      }
+      if (maxSize !== void 0 && file.size > maxSize) {
+        newErrors.push(`File "${file.name}" exceeds maximum size of ${maxSize} bytes`);
+        continue;
+      }
+      validFiles.push(file);
+    }
+    batch(() => {
+      setErrors(newErrors);
+      if (validFiles.length > 0) {
+        if (multiple) {
+          setFiles((prev) => [...prev, ...validFiles]);
+        } else {
+          setFiles([validFiles[validFiles.length - 1]]);
+        }
+        if (onFiles) {
+          onFiles(validFiles);
+        }
+      }
+    });
+  }
+  function removeFile(index) {
+    setFiles((prev) => {
+      if (index < 0 || index >= prev.length) return prev;
+      const next = [...prev];
+      next.splice(index, 1);
+      return next;
+    });
+  }
+  function clear() {
+    batch(() => {
+      setFiles([]);
+      setErrors([]);
+    });
+  }
+  return {
+    files,
+    addFiles,
+    removeFile,
+    clear,
+    errors,
+    isDragOver,
+    setDragOver
+  };
+}
+
+// src/widgets/contentEditable.ts
+function contentEditable() {
+  const [content, setContent] = signal("");
+  const [isFocused, setFocused] = signal(false);
+  function execCommand(command, value) {
+    if (typeof document !== "undefined" && document.execCommand) {
+      document.execCommand(command, false, value ?? "");
+    }
+  }
+  function bold() {
+    execCommand("bold");
+  }
+  function italic() {
+    execCommand("italic");
+  }
+  function underline() {
+    execCommand("underline");
+  }
+  return {
+    content,
+    setContent,
+    isFocused,
+    setFocused,
+    execCommand,
+    bold,
+    italic,
+    underline
+  };
+}
+
+// src/widgets/datePicker.ts
+function datePicker(options) {
+  const minDate = options?.minDate;
+  const maxDate = options?.maxDate;
+  const initialDate = options?.initialDate ?? null;
+  const [selectedDate, setSelectedDate] = signal(initialDate);
+  const [viewDate, setViewDate] = signal(initialDate ?? /* @__PURE__ */ new Date());
+  function isDateDisabled(date) {
+    if (minDate && date < stripTime(minDate)) return true;
+    if (maxDate && date > stripTime(maxDate)) return true;
+    return false;
+  }
+  function stripTime(d) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+  }
+  function sameDay(a, b) {
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+  }
+  function select2(date) {
+    if (!isDateDisabled(date)) {
+      setSelectedDate(date);
+    }
+  }
+  function nextMonth() {
+    setViewDate((prev) => {
+      const next = new Date(prev);
+      next.setMonth(next.getMonth() + 1);
+      return next;
+    });
+  }
+  function prevMonth() {
+    setViewDate((prev) => {
+      const next = new Date(prev);
+      next.setMonth(next.getMonth() - 1);
+      return next;
+    });
+  }
+  function nextYear() {
+    setViewDate((prev) => {
+      const next = new Date(prev);
+      next.setFullYear(next.getFullYear() + 1);
+      return next;
+    });
+  }
+  function prevYear() {
+    setViewDate((prev) => {
+      const next = new Date(prev);
+      next.setFullYear(next.getFullYear() - 1);
+      return next;
+    });
+  }
+  const daysInMonth = derived(() => {
+    const vd = viewDate();
+    const year = vd.getFullYear();
+    const month = vd.getMonth();
+    const today = /* @__PURE__ */ new Date();
+    const selected = selectedDate();
+    const firstDay = new Date(year, month, 1);
+    const startDow = firstDay.getDay();
+    const lastDay = new Date(year, month + 1, 0);
+    const totalDaysInMonth = lastDay.getDate();
+    const days = [];
+    for (let i = startDow - 1; i >= 0; i--) {
+      const date = new Date(year, month, -i);
+      days.push({
+        date,
+        isCurrentMonth: false,
+        isToday: sameDay(date, today),
+        isSelected: selected !== null && sameDay(date, selected),
+        isDisabled: isDateDisabled(date)
+      });
+    }
+    for (let d = 1; d <= totalDaysInMonth; d++) {
+      const date = new Date(year, month, d);
+      days.push({
+        date,
+        isCurrentMonth: true,
+        isToday: sameDay(date, today),
+        isSelected: selected !== null && sameDay(date, selected),
+        isDisabled: isDateDisabled(date)
+      });
+    }
+    const remaining = days.length % 7;
+    if (remaining > 0) {
+      const trailingCount = 7 - remaining;
+      for (let i = 1; i <= trailingCount; i++) {
+        const date = new Date(year, month + 1, i);
+        days.push({
+          date,
+          isCurrentMonth: false,
+          isToday: sameDay(date, today),
+          isSelected: selected !== null && sameDay(date, selected),
+          isDisabled: isDateDisabled(date)
+        });
+      }
+    }
+    return days;
+  });
+  return {
+    selectedDate,
+    select: select2,
+    viewDate,
+    setViewDate,
+    nextMonth,
+    prevMonth,
+    nextYear,
+    prevYear,
+    daysInMonth,
+    isDateDisabled
+  };
+}
+export {
+  accordion,
+  combobox,
+  contentEditable,
+  datePicker,
+  fileUpload,
+  popover,
+  select,
+  tabs,
+  tooltip
+};

package/package.json

@@ -0,0 +1,134 @@
+{
+  "name": "sibujs",
+  "version": "1.0.0-beta.1",
+  "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",
+    "framework",
+    "reactive",
+    "dom"
+  ],
+  "homepage": "https://github.com/hexplus/sibujs#readme",
+  "bugs": {
+    "url": "https://github.com/hexplus/sibujs/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hexplus/sibujs.git"
+  },
+  "license": "MIT",
+  "author": "hexplus (https://github.com/hexplus)",
+  "type": "module",
+  "sideEffects": false,
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "lint": "biome check --max-diagnostics=500 src/ tests/",
+    "lint:fix": "biome check --write src/ tests/",
+    "format": "biome format --write src/ tests/",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "build": "tsup index.ts data.ts browser.ts patterns.ts motion.ts ui.ts widgets.ts ssr.ts devtools.ts performance.ts ecosystem.ts plugins.ts build.ts testing.ts --dts --format esm,cjs --out-dir dist && tsup cdn.ts --format iife --globalName Sibu --out-dir dist --no-dts --minify",
+    "bench": "node bench.mjs",
+    "bench:save": "node bench.mjs --save",
+    "bench:check": "node bench.mjs --compare",
+    "publish:npm": "node publish.mjs",
+    "prepublishOnly": "npm run build"
+  },
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./data": {
+      "types": "./dist/data.d.ts",
+      "import": "./dist/data.js",
+      "require": "./dist/data.cjs"
+    },
+    "./browser": {
+      "types": "./dist/browser.d.ts",
+      "import": "./dist/browser.js",
+      "require": "./dist/browser.cjs"
+    },
+    "./patterns": {
+      "types": "./dist/patterns.d.ts",
+      "import": "./dist/patterns.js",
+      "require": "./dist/patterns.cjs"
+    },
+    "./motion": {
+      "types": "./dist/motion.d.ts",
+      "import": "./dist/motion.js",
+      "require": "./dist/motion.cjs"
+    },
+    "./ui": {
+      "types": "./dist/ui.d.ts",
+      "import": "./dist/ui.js",
+      "require": "./dist/ui.cjs"
+    },
+    "./widgets": {
+      "types": "./dist/widgets.d.ts",
+      "import": "./dist/widgets.js",
+      "require": "./dist/widgets.cjs"
+    },
+    "./ssr": {
+      "types": "./dist/ssr.d.ts",
+      "import": "./dist/ssr.js",
+      "require": "./dist/ssr.cjs"
+    },
+    "./devtools": {
+      "types": "./dist/devtools.d.ts",
+      "import": "./dist/devtools.js",
+      "require": "./dist/devtools.cjs"
+    },
+    "./performance": {
+      "types": "./dist/performance.d.ts",
+      "import": "./dist/performance.js",
+      "require": "./dist/performance.cjs"
+    },
+    "./ecosystem": {
+      "types": "./dist/ecosystem.d.ts",
+      "import": "./dist/ecosystem.js",
+      "require": "./dist/ecosystem.cjs"
+    },
+    "./plugins": {
+      "types": "./dist/plugins.d.ts",
+      "import": "./dist/plugins.js",
+      "require": "./dist/plugins.cjs"
+    },
+    "./build": {
+      "types": "./dist/build.d.ts",
+      "import": "./dist/build.js",
+      "require": "./dist/build.cjs"
+    },
+    "./testing": {
+      "types": "./dist/testing.d.ts",
+      "import": "./dist/testing.js",
+      "require": "./dist/testing.cjs"
+    }
+  },
+  "browserslist": [
+    "Chrome >= 80",
+    "Firefox >= 78",
+    "Safari >= 14",
+    "Edge >= 80"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.4.7",
+    "@types/node": "^25.5.0",
+    "@vitest/ui": "^3.1.3",
+    "jsdom": "^26.1.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.8.3",
+    "vitest": "^3.1.3"
+  }
+}