fynixui 1.0.11 → 1.0.13

package/dist/custom/DataTable.js

@@ -0,0 +1,359 @@
+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

@@ -1,4 +1,244 @@
 import { Fynix } from "../runtime.js";
+const VARIANT_STYLES = {
+    primary: {
+        bg: "#0d6efd",
+        color: "#fff",
+        border: "#0d6efd",
+        hoverBg: "#0b5ed7",
+        hoverColor: "#fff",
+        hoverBorder: "#0a58ca",
+    },
+    secondary: {
+        bg: "#6c757d",
+        color: "#fff",
+        border: "#6c757d",
+        hoverBg: "#5c636a",
+        hoverColor: "#fff",
+        hoverBorder: "#565e64",
+    },
+    success: {
+        bg: "#198754",
+        color: "#fff",
+        border: "#198754",
+        hoverBg: "#157347",
+        hoverColor: "#fff",
+        hoverBorder: "#146c43",
+    },
+    danger: {
+        bg: "#dc3545",
+        color: "#fff",
+        border: "#dc3545",
+        hoverBg: "#bb2d3b",
+        hoverColor: "#fff",
+        hoverBorder: "#b02a37",
+    },
+    warning: {
+        bg: "#ffc107",
+        color: "#212529",
+        border: "#ffc107",
+        hoverBg: "#ffca2c",
+        hoverColor: "#212529",
+        hoverBorder: "#ffc720",
+    },
+    info: {
+        bg: "#0dcaf0",
+        color: "#212529",
+        border: "#0dcaf0",
+        hoverBg: "#31d2f2",
+        hoverColor: "#212529",
+        hoverBorder: "#25cff2",
+    },
+    light: {
+        bg: "#f8f9fa",
+        color: "#212529",
+        border: "#dee2e6",
+        hoverBg: "#f9fafb",
+        hoverColor: "#212529",
+        hoverBorder: "#d3d4d5",
+    },
+    dark: {
+        bg: "#212529",
+        color: "#fff",
+        border: "#212529",
+        hoverBg: "#424649",
+        hoverColor: "#fff",
+        hoverBorder: "#373b3e",
+    },
+    link: {
+        bg: "transparent",
+        color: "#0d6efd",
+        border: "transparent",
+        hoverBg: "transparent",
+        hoverColor: "#0a58ca",
+        hoverBorder: "transparent",
+    },
+};
+const OUTLINE_STYLES = {
+    primary: {
+        bg: "transparent",
+        color: "#0d6efd",
+        border: "#0d6efd",
+        hoverBg: "#0d6efd",
+        hoverColor: "#fff",
+        hoverBorder: "#0d6efd",
+    },
+    secondary: {
+        bg: "transparent",
+        color: "#6c757d",
+        border: "#6c757d",
+        hoverBg: "#6c757d",
+        hoverColor: "#fff",
+        hoverBorder: "#6c757d",
+    },
+    success: {
+        bg: "transparent",
+        color: "#198754",
+        border: "#198754",
+        hoverBg: "#198754",
+        hoverColor: "#fff",
+        hoverBorder: "#198754",
+    },
+    danger: {
+        bg: "transparent",
+        color: "#dc3545",
+        border: "#dc3545",
+        hoverBg: "#dc3545",
+        hoverColor: "#fff",
+        hoverBorder: "#dc3545",
+    },
+    warning: {
+        bg: "transparent",
+        color: "#ffc107",
+        border: "#ffc107",
+        hoverBg: "#ffc107",
+        hoverColor: "#212529",
+        hoverBorder: "#ffc107",
+    },
+    info: {
+        bg: "transparent",
+        color: "#0dcaf0",
+        border: "#0dcaf0",
+        hoverBg: "#0dcaf0",
+        hoverColor: "#212529",
+        hoverBorder: "#0dcaf0",
+    },
+    light: {
+        bg: "transparent",
+        color: "#adb5bd",
+        border: "#adb5bd",
+        hoverBg: "#f8f9fa",
+        hoverColor: "#212529",
+        hoverBorder: "#adb5bd",
+    },
+    dark: {
+        bg: "transparent",
+        color: "#212529",
+        border: "#212529",
+        hoverBg: "#212529",
+        hoverColor: "#fff",
+        hoverBorder: "#212529",
+    },
+    link: {
+        bg: "transparent",
+        color: "#0d6efd",
+        border: "transparent",
+        hoverBg: "transparent",
+        hoverColor: "#0a58ca",
+        hoverBorder: "transparent",
+    },
+};
+const SIZE_STYLES = {
+    sm: { padding: "4px 8px", fontSize: "12px" },
+    md: { padding: "6px 12px", fontSize: "14px" },
+    lg: { padding: "8px 16px", fontSize: "16px" },
+};
+const BASE_STYLE = {
+    display: "inline-block",
+    fontWeight: "400",
+    lineHeight: "1.5",
+    textAlign: "center",
+    textDecoration: "none",
+    verticalAlign: "middle",
+    cursor: "pointer",
+    userSelect: "none",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: "4px",
+    transition: "color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out",
+};
+let stylesInjected = false;
+function injectButtonStyles() {
+    if (stylesInjected || typeof document === "undefined")
+        return;
+    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;" : ""}
+      }
+    `);
+    }
+    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;
+      }
+    `);
+    }
+    const style = document.createElement("style");
+    style.setAttribute("data-fynix", "button-styles");
+    style.textContent = rules.join("\n");
+    document.head.appendChild(style);
+}
 export function Button({ value = "", ...props }) {
-    return Fynix("button", props, value);
+    const { value: _stripped, ...cleanProps } = props;
+    return Fynix("button", cleanProps, value);
+}
+function UIButton({ value = "", variant = "primary", size = "md", outline = false, style: customStyle = {}, disabled = false, ...props }) {
+    injectButtonStyles();
+    const colors = outline ? OUTLINE_STYLES[variant] : VARIANT_STYLES[variant];
+    const sizing = SIZE_STYLES[size];
+    const dataAttr = outline ? `outline-${variant}` : variant;
+    const computedStyle = {
+        ...BASE_STYLE,
+        backgroundColor: colors.bg,
+        color: colors.color,
+        borderColor: colors.border,
+        padding: sizing.padding,
+        fontSize: sizing.fontSize,
+        opacity: disabled ? "0.65" : "1",
+        pointerEvents: disabled ? "none" : "auto",
+        ...customStyle,
+    };
+    return Button({
+        value,
+        style: computedStyle,
+        disabled,
+        "data-fynix-btn": dataAttr,
+        ...props,
+    });
 }
+export const PrimaryButton = (p) => UIButton({ ...p, variant: "primary" });
+export const SecondaryButton = (p) => UIButton({ ...p, variant: "secondary" });
+export const SuccessButton = (p) => UIButton({ ...p, variant: "success" });
+export const DangerButton = (p) => UIButton({ ...p, variant: "danger" });
+export const WarningButton = (p) => UIButton({ ...p, variant: "warning" });
+export const InfoButton = (p) => UIButton({ ...p, variant: "info" });
+export const LightButton = (p) => UIButton({ ...p, variant: "light" });
+export const DarkButton = (p) => UIButton({ ...p, variant: "dark" });
+export const LinkButton = (p) => UIButton({ ...p, variant: "link" });
+export const OutlinePrimaryButton = (p) => UIButton({ ...p, variant: "primary", outline: true });
+export const OutlineSecondaryButton = (p) => UIButton({ ...p, variant: "secondary", outline: true });
+export const OutlineSuccessButton = (p) => UIButton({ ...p, variant: "success", outline: true });
+export const OutlineDangerButton = (p) => UIButton({ ...p, variant: "danger", outline: true });
+export const OutlineWarningButton = (p) => UIButton({ ...p, variant: "warning", outline: true });
+export const OutlineInfoButton = (p) => UIButton({ ...p, variant: "info", outline: true });
+export const OutlineLightButton = (p) => UIButton({ ...p, variant: "light", outline: true });
+export const OutlineDarkButton = (p) => UIButton({ ...p, variant: "dark", outline: true });
+export const OutlineLinkButton = (p) => UIButton({ ...p, variant: "link", outline: true });

package/dist/custom/index.js

@@ -1,2 +1,3 @@
-export { Button } from "./button";
+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/error/errorOverlay.js

@@ -4,7 +4,7 @@ export function showErrorOverlay(error) {
     overlay.id = "dev-error-overlay";
     Object.assign(overlay.style, {
         position: "fixed",
-        inset: 0,
+        inset: "0",
         width: "100%",
         height: "100%",
         backgroundColor: "rgba(0, 0, 0, 0.9)",

package/dist/hooks/nixFor.js

@@ -1,20 +1,19 @@
-import { Fragment } from "../runtime";
+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) {
@@ -23,19 +22,18 @@ 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;"
-                },
-                key: index
+                props: { children: ["Error rendering item"], style: "color: red;" },
+                key: index,
             };
         }
     });