fynixui 1.0.12 → 1.0.13

package/dist/custom/DataTable.js

@@ -1 +1,359 @@
-"use strict";
+import { Fynix } from "../runtime.js";
+const VARIANT_THEMES = {
+    primary: {
+        headerBg: "rgba(13,110,253,0.08)",
+        headerColor: "#0d6efd",
+        headerBorder: "rgba(13,110,253,0.2)",
+        rowBorder: "rgba(13,110,253,0.09)",
+        rowHoverBg: "rgba(13,110,253,0.04)",
+        stripeBg: "rgba(13,110,253,0.03)",
+        accentBg: "#0d6efd",
+        accentColor: "#fff",
+        accentHoverBg: "#0b5ed7",
+        accentBorder: "#0d6efd",
+    },
+    secondary: {
+        headerBg: "rgba(108,117,125,0.08)",
+        headerColor: "#6c757d",
+        headerBorder: "rgba(108,117,125,0.2)",
+        rowBorder: "rgba(108,117,125,0.09)",
+        rowHoverBg: "rgba(108,117,125,0.04)",
+        stripeBg: "rgba(108,117,125,0.03)",
+        accentBg: "#6c757d",
+        accentColor: "#fff",
+        accentHoverBg: "#5c636a",
+        accentBorder: "#6c757d",
+    },
+    success: {
+        headerBg: "rgba(25,135,84,0.08)",
+        headerColor: "#198754",
+        headerBorder: "rgba(25,135,84,0.2)",
+        rowBorder: "rgba(25,135,84,0.09)",
+        rowHoverBg: "rgba(25,135,84,0.04)",
+        stripeBg: "rgba(25,135,84,0.03)",
+        accentBg: "#198754",
+        accentColor: "#fff",
+        accentHoverBg: "#157347",
+        accentBorder: "#198754",
+    },
+    danger: {
+        headerBg: "rgba(220,53,69,0.08)",
+        headerColor: "#dc3545",
+        headerBorder: "rgba(220,53,69,0.2)",
+        rowBorder: "rgba(220,53,69,0.09)",
+        rowHoverBg: "rgba(220,53,69,0.04)",
+        stripeBg: "rgba(220,53,69,0.03)",
+        accentBg: "#dc3545",
+        accentColor: "#fff",
+        accentHoverBg: "#bb2d3b",
+        accentBorder: "#dc3545",
+    },
+    warning: {
+        headerBg: "rgba(255,193,7,0.10)",
+        headerColor: "#856404",
+        headerBorder: "rgba(255,193,7,0.3)",
+        rowBorder: "rgba(255,193,7,0.12)",
+        rowHoverBg: "rgba(255,193,7,0.05)",
+        stripeBg: "rgba(255,193,7,0.04)",
+        accentBg: "#ffc107",
+        accentColor: "#212529",
+        accentHoverBg: "#ffca2c",
+        accentBorder: "#ffc107",
+    },
+    info: {
+        headerBg: "rgba(13,202,240,0.08)",
+        headerColor: "#055160",
+        headerBorder: "rgba(13,202,240,0.2)",
+        rowBorder: "rgba(13,202,240,0.09)",
+        rowHoverBg: "rgba(13,202,240,0.04)",
+        stripeBg: "rgba(13,202,240,0.03)",
+        accentBg: "#0dcaf0",
+        accentColor: "#212529",
+        accentHoverBg: "#31d2f2",
+        accentBorder: "#0dcaf0",
+    },
+    light: {
+        headerBg: "#f8f9fa",
+        headerColor: "#495057",
+        headerBorder: "#dee2e6",
+        rowBorder: "#e9ecef",
+        rowHoverBg: "#f1f3f5",
+        stripeBg: "#f8f9fa",
+        accentBg: "#f8f9fa",
+        accentColor: "#212529",
+        accentHoverBg: "#e2e6ea",
+        accentBorder: "#dee2e6",
+    },
+    dark: {
+        headerBg: "rgba(33,37,41,0.07)",
+        headerColor: "inherit",
+        headerBorder: "rgba(33,37,41,0.15)",
+        rowBorder: "rgba(33,37,41,0.08)",
+        rowHoverBg: "rgba(33,37,41,0.04)",
+        stripeBg: "rgba(33,37,41,0.03)",
+        accentBg: "#212529",
+        accentColor: "#fff",
+        accentHoverBg: "#424649",
+        accentBorder: "#212529",
+    },
+};
+const OUTLINE_THEMES = Object.fromEntries(Object.entries(VARIANT_THEMES).map(([k, v]) => [
+    k,
+    {
+        ...v,
+        headerBg: "transparent",
+        stripeBg: "transparent",
+    },
+]));
+let tableStylesInjected = false;
+function injectTableStyles() {
+    if (tableStylesInjected || typeof document === "undefined")
+        return;
+    tableStylesInjected = true;
+    const rules = [
+        `
+    [data-fynix-dt] {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 14px;
+      font-family: inherit;
+    }
+    [data-fynix-dt] th,
+    [data-fynix-dt] td {
+      padding: 8px 12px;
+      text-align: left;
+      vertical-align: middle;
+      border-bottom: 1px solid;
+      white-space: nowrap;
+    }
+    [data-fynix-dt] th {
+      font-weight: 500;
+      font-size: 12px;
+    }
+    [data-fynix-dt] tr:last-child td {
+      border-bottom: none;
+    }
+    [data-fynix-dt-actions] {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+    }
+    [data-fynix-dt-btn] {
+      display: inline-block;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 400;
+      padding: 3px 9px;
+      border-radius: 4px;
+      border: 1px solid;
+      line-height: 1.5;
+      transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+      user-select: none;
+      text-decoration: none;
+      white-space: nowrap;
+    }
+    `,
+    ];
+    for (const [variant, theme] of Object.entries(VARIANT_THEMES)) {
+        rules.push(`
+      [data-fynix-dt="${variant}"] th {
+        background-color: ${theme.headerBg} !important;
+        color: ${theme.headerColor} !important;
+        border-color: ${theme.headerBorder} !important;
+      }
+      [data-fynix-dt="${variant}"] td {
+        border-color: ${theme.rowBorder} !important;
+      }
+      [data-fynix-dt="${variant}"][data-fynix-dt-hover] tr:hover td {
+        background-color: ${theme.rowHoverBg} !important;
+      }
+      [data-fynix-dt="${variant}"][data-fynix-dt-stripe] tr:nth-child(even) td {
+        background-color: ${theme.stripeBg} !important;
+      }
+
+      /* View button (filled with accent) */
+      [data-fynix-dt="${variant}"] [data-fynix-dt-btn="view"] {
+        background-color: ${theme.accentBg};
+        color: ${theme.accentColor};
+        border-color: ${theme.accentBorder};
+      }
+      [data-fynix-dt="${variant}"] [data-fynix-dt-btn="view"]:hover {
+        background-color: ${theme.accentHoverBg} !important;
+      }
+
+      /* Edit button (outline accent) */
+      [data-fynix-dt="${variant}"] [data-fynix-dt-btn="edit"] {
+        background-color: transparent;
+        color: ${theme.accentBg === "transparent" ? theme.headerColor : theme.accentBg};
+        border-color: ${theme.accentBorder};
+      }
+      [data-fynix-dt="${variant}"] [data-fynix-dt-btn="edit"]:hover {
+        background-color: ${theme.accentBg} !important;
+        color: ${theme.accentColor} !important;
+      }
+
+      /* Delete button (always danger outline regardless of variant) */
+      [data-fynix-dt="${variant}"] [data-fynix-dt-btn="delete"] {
+        background-color: transparent;
+        color: #dc3545;
+        border-color: #dc3545;
+      }
+      [data-fynix-dt="${variant}"] [data-fynix-dt-btn="delete"]:hover {
+        background-color: #dc3545 !important;
+        color: #fff !important;
+      }
+    `);
+        const outlineTheme = OUTLINE_THEMES[variant];
+        rules.push(`
+      [data-fynix-dt="outline-${variant}"] th {
+        background-color: ${outlineTheme.headerBg} !important;
+        color: ${theme.headerColor} !important;
+        border-color: ${theme.accentBorder} !important;
+      }
+      [data-fynix-dt="outline-${variant}"] td {
+        border-color: ${theme.rowBorder} !important;
+      }
+      [data-fynix-dt="outline-${variant}"][data-fynix-dt-hover] tr:hover td {
+        background-color: ${theme.rowHoverBg} !important;
+      }
+      [data-fynix-dt="outline-${variant}"] [data-fynix-dt-btn="view"] {
+        background-color: transparent;
+        color: ${theme.accentBg};
+        border-color: ${theme.accentBorder};
+      }
+      [data-fynix-dt="outline-${variant}"] [data-fynix-dt-btn="view"]:hover {
+        background-color: ${theme.accentBg} !important;
+        color: ${theme.accentColor} !important;
+      }
+      [data-fynix-dt="outline-${variant}"] [data-fynix-dt-btn="edit"] {
+        background-color: transparent;
+        color: #198754;
+        border-color: #198754;
+      }
+      [data-fynix-dt="outline-${variant}"] [data-fynix-dt-btn="edit"]:hover {
+        background-color: #198754 !important;
+        color: #fff !important;
+      }
+      [data-fynix-dt="outline-${variant}"] [data-fynix-dt-btn="delete"] {
+        background-color: transparent;
+        color: #dc3545;
+        border-color: #dc3545;
+      }
+      [data-fynix-dt="outline-${variant}"] [data-fynix-dt-btn="delete"]:hover {
+        background-color: #dc3545 !important;
+        color: #fff !important;
+      }
+    `);
+    }
+    const style = document.createElement("style");
+    style.setAttribute("data-fynix", "datatable-styles");
+    style.textContent = rules.join("\n");
+    document.head.appendChild(style);
+}
+function getCellValue(row, key) {
+    return row[key];
+}
+export function DataTable({ columns, data, actions, style: wrapStyle = {}, class: wrapClass = "", tableStyle = {}, tableClass = "", rc, ...rest }) {
+    const thead = Fynix("thead", {}, Fynix("tr", {}, ...columns.map((col) => Fynix("th", { style: col.style ?? {}, class: col.class ?? "" }, col.label)), actions ? Fynix("th", {}, "Actions") : null));
+    const tbody = Fynix("tbody", {}, ...data.map((row, rowIndex) => Fynix("tr", {}, ...columns.map((col) => {
+        const raw = getCellValue(row, col.key);
+        const cell = col.render ? col.render(raw, row, rowIndex) : raw;
+        return Fynix("td", { style: col.style ?? {}, class: col.class ?? "" }, cell);
+    }), actions
+        ? Fynix("td", {}, Fynix("div", { style: { display: "flex", gap: "6px" } }, actions.view !== false && actions.view
+            ? Fynix("button", {
+                type: "button",
+                "r-click": () => actions.view(row, rowIndex),
+            }, "View")
+            : null, actions.edit !== false && actions.edit
+            ? Fynix("button", {
+                type: "button",
+                "r-click": () => actions.edit(row, rowIndex),
+            }, "Edit")
+            : null, actions.delete !== false && actions.delete
+            ? Fynix("button", {
+                type: "button",
+                "r-click": () => actions.delete(row, rowIndex),
+            }, "Delete")
+            : null, ...(actions.extra ?? []).map((extra) => Fynix("button", {
+            type: "button",
+            style: extra.style ?? {},
+            class: extra.class ?? "",
+            "r-click": () => extra.handler(row, rowIndex),
+        }, extra.label))))
+        : null)));
+    return Fynix("div", { style: wrapStyle, class: wrapClass, rc }, Fynix("table", { style: tableStyle, class: tableClass, ...rest }, thead, tbody));
+}
+function UIDataTable({ columns, data, actions, variant = "primary", outline = false, striped = false, hoverable = true, bordered = true, style: wrapStyle = {}, class: wrapClass = "", tableStyle = {}, tableClass = "", rc, }) {
+    injectTableStyles();
+    const dataAttr = outline ? `outline-${variant}` : variant;
+    const tableAttrs = {
+        "data-fynix-dt": dataAttr,
+        ...(hoverable ? { "data-fynix-dt-hover": "" } : {}),
+        ...(striped ? { "data-fynix-dt-stripe": "" } : {}),
+        style: tableStyle,
+        class: tableClass,
+    };
+    const borderStyle = bordered
+        ? {
+            border: "1px solid",
+            borderColor: "rgba(0,0,0,0.08)",
+            borderRadius: "6px",
+            overflow: "hidden",
+        }
+        : {};
+    const wrapAttrs = {
+        style: { display: "block", ...borderStyle, ...wrapStyle },
+        class: wrapClass,
+        rc,
+    };
+    const thead = Fynix("thead", {}, Fynix("tr", {}, ...columns.map((col) => Fynix("th", { style: col.style ?? {}, class: col.class ?? "" }, col.label)), actions ? Fynix("th", {}, "Actions") : null));
+    const tbody = Fynix("tbody", {}, ...data.map((row, rowIndex) => Fynix("tr", {}, ...columns.map((col) => {
+        const raw = getCellValue(row, col.key);
+        const cell = col.render ? col.render(raw, row, rowIndex) : raw;
+        return Fynix("td", { style: col.style ?? {}, class: col.class ?? "" }, cell);
+    }), actions
+        ? Fynix("td", {}, Fynix("div", { "data-fynix-dt-actions": "" }, actions.view !== false && actions.view
+            ? Fynix("button", {
+                type: "button",
+                "data-fynix-dt-btn": "view",
+                "r-click": () => actions.view(row, rowIndex),
+            }, "View")
+            : null, actions.edit !== false && actions.edit
+            ? Fynix("button", {
+                type: "button",
+                "data-fynix-dt-btn": "edit",
+                "r-click": () => actions.edit(row, rowIndex),
+            }, "Edit")
+            : null, actions.delete !== false && actions.delete
+            ? Fynix("button", {
+                type: "button",
+                "data-fynix-dt-btn": "delete",
+                "r-click": () => actions.delete(row, rowIndex),
+            }, "Delete")
+            : null, ...(actions.extra ?? []).map((extra) => Fynix("button", {
+            type: "button",
+            "data-fynix-dt-btn": "extra",
+            style: extra.style ?? {},
+            class: extra.class ?? "",
+            "r-click": () => extra.handler(row, rowIndex),
+        }, extra.label))))
+        : null)));
+    return Fynix("div", wrapAttrs, Fynix("table", tableAttrs, thead, tbody));
+}
+export const PrimaryDataTable = (p) => UIDataTable({ ...p, variant: "primary" });
+export const SecondaryDataTable = (p) => UIDataTable({ ...p, variant: "secondary" });
+export const SuccessDataTable = (p) => UIDataTable({ ...p, variant: "success" });
+export const DangerDataTable = (p) => UIDataTable({ ...p, variant: "danger" });
+export const WarningDataTable = (p) => UIDataTable({ ...p, variant: "warning" });
+export const InfoDataTable = (p) => UIDataTable({ ...p, variant: "info" });
+export const LightDataTable = (p) => UIDataTable({ ...p, variant: "light" });
+export const DarkDataTable = (p) => UIDataTable({ ...p, variant: "dark" });
+export const OutlinePrimaryDataTable = (p) => UIDataTable({ ...p, variant: "primary", outline: true });
+export const OutlineSecondaryDataTable = (p) => UIDataTable({ ...p, variant: "secondary", outline: true });
+export const OutlineSuccessDataTable = (p) => UIDataTable({ ...p, variant: "success", outline: true });
+export const OutlineDangerDataTable = (p) => UIDataTable({ ...p, variant: "danger", outline: true });
+export const OutlineWarningDataTable = (p) => UIDataTable({ ...p, variant: "warning", outline: true });
+export const OutlineInfoDataTable = (p) => UIDataTable({ ...p, variant: "info", outline: true });
+export const OutlineLightDataTable = (p) => UIDataTable({ ...p, variant: "light", outline: true });
+export const OutlineDarkDataTable = (p) => UIDataTable({ ...p, variant: "dark", outline: true });

package/dist/custom/button.js

@@ -173,22 +173,22 @@ function injectButtonStyles() {
     stylesInjected = true;
     const rules = [];
     for (const [variant, colors] of Object.entries(VARIANT_STYLES)) {
-        rules.push(`
-      button[data-fynix-btn="${variant}"]:not([disabled]):hover {
-        background-color: ${colors.hoverBg} !important;
-        color: ${colors.hoverColor} !important;
-        border-color: ${colors.hoverBorder} !important;
-        ${variant === "link" ? "text-decoration: underline !important;" : ""}
-      }
+        rules.push(`
+      button[data-fynix-btn="${variant}"]:not([disabled]):hover {
+        background-color: ${colors.hoverBg} !important;
+        color: ${colors.hoverColor} !important;
+        border-color: ${colors.hoverBorder} !important;
+        ${variant === "link" ? "text-decoration: underline !important;" : ""}
+      }
     `);
     }
     for (const [variant, colors] of Object.entries(OUTLINE_STYLES)) {
-        rules.push(`
-      button[data-fynix-btn="outline-${variant}"]:not([disabled]):hover {
-        background-color: ${colors.hoverBg} !important;
-        color: ${colors.hoverColor} !important;
-        border-color: ${colors.hoverBorder} !important;
-      }
+        rules.push(`
+      button[data-fynix-btn="outline-${variant}"]:not([disabled]):hover {
+        background-color: ${colors.hoverBg} !important;
+        color: ${colors.hoverColor} !important;
+        border-color: ${colors.hoverBorder} !important;
+      }
     `);
     }
     const style = document.createElement("style");

package/dist/custom/index.js

@@ -1,2 +1,3 @@
 export { Button, PrimaryButton, SecondaryButton, SuccessButton, DangerButton, WarningButton, InfoButton, LightButton, DarkButton, LinkButton, } from "./button";
+export { DataTable, PrimaryDataTable, SecondaryDataTable, SuccessDataTable, DangerDataTable, WarningDataTable, InfoDataTable, LightDataTable, DarkDataTable, OutlinePrimaryDataTable, OutlineSecondaryDataTable, OutlineSuccessDataTable, OutlineDangerDataTable, OutlineWarningDataTable, OutlineInfoDataTable, OutlineLightDataTable, OutlineDarkDataTable, } from "./DataTable";
 export { Path } from "./path";

package/dist/hooks/nixFor.js

@@ -1,22 +1,19 @@
 import { Fragment } from "../runtime.js";
 export function For(props) {
-    let items = [];
-    if (props.each &&
-        typeof props.each === "object" &&
-        "_isNixState" in props.each) {
-        items = props.each.value;
-    }
-    else if (Array.isArray(props.each)) {
-        items = props.each;
-    }
+    const isReactive = props.each && typeof props.each === "object" && "_isNixState" in props.each;
+    const items = isReactive
+        ? props.each.value
+        : Array.isArray(props.each)
+            ? props.each
+            : [];
     let renderer;
     if (typeof props.children === "function") {
         renderer = props.children;
     }
     else if (Array.isArray(props.children)) {
-        const firstChild = props.children[0];
-        if (typeof firstChild === "function") {
-            renderer = firstChild;
+        const first = props.children[0];
+        if (typeof first === "function") {
+            renderer = first;
         }
     }
     if (!renderer) {
@@ -25,18 +22,17 @@ export function For(props) {
         }
         return { type: Fragment, props: { children: [] }, key: null };
     }
+    const finalRenderer = renderer;
     const mapped = items.map((item, index) => {
         try {
-            return renderer(item, index);
+            const vnode = finalRenderer(item, index);
+            return { ...vnode, key: vnode.key ?? index };
         }
         catch (error) {
             console.error(`[Fynix] Error rendering item at index ${index}:`, error);
             return {
                 type: "div",
-                props: {
-                    children: ["Error rendering item"],
-                    style: "color: red;",
-                },
+                props: { children: ["Error rendering item"], style: "color: red;" },
                 key: index,
             };
         }

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fynixui",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "type": "module",
   "description": "Core package for Fynix UI framework - A lightweight, reactive UI framework with TypeScript support.",
   "main": "./dist/fynix/index.js",

package/dist/runtime.js

@@ -758,9 +758,7 @@ function endComponent() {
                 ctx.rerender = createRerender(ctx);
             const unsub = state.subscribe(() => {
                 if (ctx.rerender && ctx._isMounted) {
-                    typeof queueMicrotask === "function"
-                        ? queueMicrotask(() => ctx.rerender())
-                        : setTimeout(ctx.rerender, 0);
+                    ctx.rerender();
                 }
             });
             ctx._subscriptions.add(state);
@@ -782,7 +780,7 @@ function createRerender(ctx) {
             if (ctx._isRerendering || !ctx._isMounted)
                 return;
             if (ctx._fiber) {
-                fiberReconciler.scheduleUpdate(ctx._fiber, "normal");
+                fiberReconciler.scheduleUpdate(ctx._fiber, "high");
             }
             else if (ctx._vnode) {
                 console.warn("[Fynix] Rerender triggered before fiber assigned — skipping.");
@@ -875,6 +873,7 @@ function removeDomCleanups(node) {
 class FiberReconciler {
     constructor() {
         this.wipRoot = null;
+        this.wipEntry = null;
         this.nextWork = null;
         this.deletions = [];
     }
@@ -882,6 +881,7 @@ class FiberReconciler {
         const rootFiber = this.vnodeToFiber(vnode, null, null);
         rootFiber._domNode = container;
         this.wipRoot = rootFiber;
+        this.wipEntry = null;
         this.nextWork = rootFiber;
         this.deletions = [];
         this.scheduleRender("high");
@@ -893,6 +893,7 @@ class FiberReconciler {
         while (root.parent)
             root = root.parent;
         this.wipRoot = root;
+        this.wipEntry = wip;
         this.nextWork = wip;
         this.deletions = [];
         this.scheduleRender(priority);
@@ -959,6 +960,14 @@ class FiberReconciler {
     updateComponentFiber(fiber) {
         const vnode = fiber._vnode;
         let ctx = componentInstances.get(vnode);
+        if (!ctx && fiber.alternate?._vnode) {
+            ctx = componentInstances.get(fiber.alternate._vnode);
+            if (ctx) {
+                componentInstances.delete(fiber.alternate._vnode);
+                componentInstances.set(vnode, ctx);
+                ctx._vnode = vnode;
+            }
+        }
         if (!ctx) {
             ctx = makeContext(vnode, fiber.type);
             componentInstances.set(vnode, ctx);
@@ -1004,9 +1013,7 @@ class FiberReconciler {
                     ctx.rerender = createRerender(ctx);
                 const unsub = state.subscribe(() => {
                     if (ctx.rerender && ctx._isMounted) {
-                        typeof queueMicrotask === "function"
-                            ? queueMicrotask(() => ctx.rerender())
-                            : setTimeout(ctx.rerender, 0);
+                        ctx.rerender();
                     }
                 });
                 ctx._subscriptions.add(state);
@@ -1105,10 +1112,10 @@ class FiberReconciler {
                 newFiber.props = el.props;
                 newFiber.key = el.key;
                 newFiber.alternate = matchFiber;
-                newFiber.effectTag = "UPDATE";
                 newFiber.parent = wipFiber;
                 newFiber._vnode = el;
                 el._fiber = newFiber;
+                newFiber.effectTag = typeof el.type === "function" ? null : "UPDATE";
             }
             else {
                 if (matchFiber) {
@@ -1139,9 +1146,14 @@ class FiberReconciler {
             return;
         this.deletions.forEach((f) => this.commitDeletion(f));
         this.deletions = [];
-        if (this.wipRoot.child)
+        if (this.wipEntry) {
+            this.commitWork(this.wipEntry);
+        }
+        else if (this.wipRoot.child) {
             this.commitWork(this.wipRoot.child);
+        }
         this.wipRoot = null;
+        this.wipEntry = null;
         this.nextWork = null;
     }
     commitWork(fiber) {

package/dist-types/custom/DataTable.d.ts

@@ -0,0 +1,54 @@
+type TableVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
+type ActionHandler<T = any> = (row: T, index: number) => void;
+export interface ColumnDef<T = any> {
+    key: keyof T | string;
+    label: string;
+    style?: Record<string, string>;
+    class?: string;
+    render?: (value: any, row: T, index: number) => any;
+}
+export interface ActionsDef<T = any> {
+    view?: ActionHandler<T> | false;
+    edit?: ActionHandler<T> | false;
+    delete?: ActionHandler<T> | false;
+    extra?: Array<{
+        label: string;
+        handler: ActionHandler<T>;
+        style?: Record<string, string>;
+        class?: string;
+    }>;
+}
+export interface DataTableProps<T = any> {
+    columns: ColumnDef<T>[];
+    data: T[];
+    actions?: ActionsDef<T>;
+    variant?: TableVariant;
+    outline?: boolean;
+    striped?: boolean;
+    hoverable?: boolean;
+    bordered?: boolean;
+    style?: Record<string, string>;
+    class?: string;
+    tableStyle?: Record<string, string>;
+    tableClass?: string;
+    rc?: string;
+    [key: string]: any;
+}
+export declare function DataTable<T = any>({ columns, data, actions, style: wrapStyle, class: wrapClass, tableStyle, tableClass, rc, ...rest }: DataTableProps<T>): any;
+export declare const PrimaryDataTable: <T>(p: DataTableProps<T>) => any;
+export declare const SecondaryDataTable: <T>(p: DataTableProps<T>) => any;
+export declare const SuccessDataTable: <T>(p: DataTableProps<T>) => any;
+export declare const DangerDataTable: <T>(p: DataTableProps<T>) => any;
+export declare const WarningDataTable: <T>(p: DataTableProps<T>) => any;
+export declare const InfoDataTable: <T>(p: DataTableProps<T>) => any;
+export declare const LightDataTable: <T>(p: DataTableProps<T>) => any;
+export declare const DarkDataTable: <T>(p: DataTableProps<T>) => any;
+export declare const OutlinePrimaryDataTable: <T>(p: DataTableProps<T>) => any;
+export declare const OutlineSecondaryDataTable: <T>(p: DataTableProps<T>) => any;
+export declare const OutlineSuccessDataTable: <T>(p: DataTableProps<T>) => any;
+export declare const OutlineDangerDataTable: <T>(p: DataTableProps<T>) => any;
+export declare const OutlineWarningDataTable: <T>(p: DataTableProps<T>) => any;
+export declare const OutlineInfoDataTable: <T>(p: DataTableProps<T>) => any;
+export declare const OutlineLightDataTable: <T>(p: DataTableProps<T>) => any;
+export declare const OutlineDarkDataTable: <T>(p: DataTableProps<T>) => any;
+export {};

package/dist-types/custom/index.d.ts

@@ -1,2 +1,3 @@
 export { Button, PrimaryButton, SecondaryButton, SuccessButton, DangerButton, WarningButton, InfoButton, LightButton, DarkButton, LinkButton, } from "./button";
+export { DataTable, PrimaryDataTable, SecondaryDataTable, SuccessDataTable, DangerDataTable, WarningDataTable, InfoDataTable, LightDataTable, DarkDataTable, OutlinePrimaryDataTable, OutlineSecondaryDataTable, OutlineSuccessDataTable, OutlineDangerDataTable, OutlineWarningDataTable, OutlineInfoDataTable, OutlineLightDataTable, OutlineDarkDataTable, } from "./DataTable";
 export { Path } from "./path";

package/dist-types/hooks/nixFor.d.ts

@@ -2,7 +2,7 @@ import { VNode } from "../types/fnx";
 interface ReactiveState<T> {
     value: T;
     _isNixState: boolean;
-    subscribe(callback: (value: T) => void): () => void;
+    subscribe(callback: () => void): () => void;
 }
 interface ForProps<T> {
     each: T[] | ReactiveState<T[]>;

package/dist-types/runtime.d.ts

@@ -130,6 +130,7 @@ export declare namespace h {
 export declare const Fynix: typeof h;
 declare class FiberReconciler {
     private wipRoot;
+    private wipEntry;
     private nextWork;
     private deletions;
     mountRoot(vnode: VNode, container: Element): void;