fynixui 1.0.11 → 1.0.12

package/dist/custom/DataTable.js

@@ -0,0 +1 @@
+"use strict";

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,2 @@
-export { Button } from "./button";
+export { Button, PrimaryButton, SecondaryButton, SuccessButton, DangerButton, WarningButton, InfoButton, LightButton, DarkButton, LinkButton, } from "./button";
 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,7 +1,9 @@
-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) {
+    if (props.each &&
+        typeof props.each === "object" &&
+        "_isNixState" in props.each) {
         items = props.each.value;
     }
     else if (Array.isArray(props.each)) {
@@ -33,9 +35,9 @@ export function For(props) {
                 type: "div",
                 props: {
                     children: ["Error rendering item"],
-                    style: "color: red;"
+                    style: "color: red;",
                 },
-                key: index
+                key: index,
             };
         }
     });

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fynixui",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "type": "module",
   "description": "Core package for Fynix UI framework - A lightweight, reactive UI framework with TypeScript support.",
   "main": "./dist/fynix/index.js",
@@ -214,6 +214,5 @@
         "./types/global.d.ts"
       ]
     }
-  },
-  "dependencies": {}
+  }
 }

package/dist/plugins/vite-plugin-res.js

@@ -1,8 +1,18 @@
 import { transform } from "esbuild";
 import { normalizePath } from "vite";
+import crypto from "crypto";
 export default function fynixPlugin(options = {}) {
-    const { jsxFactory = "Fynix", jsxFragment = "Fynix.Fragment", include = [".ts", ".js", ".jsx", ".tsx", ".fnx"], exclude = ["node_modules"], sourcemap = true, esbuildOptions = {}, } = options;
+    const { jsxFactory = "Fynix", jsxFragment = "Fynix.Fragment", include = [".ts", ".js", ".jsx", ".tsx", ".fnx"], exclude = ["node_modules"], esbuildOptions = {}, } = options;
     let viteServer = null;
+    const transformCache = new Map();
+    function hasJsxLike(code) {
+        return (/<[A-Za-z]/.test(code) ||
+            /Fynix\s*\(/.test(code) ||
+            /Fragment|<>/.test(code));
+    }
+    function getContentHash(code) {
+        return crypto.createHash("md5").update(code).digest("hex");
+    }
     return {
         name: "vite-plugin-fynix",
         enforce: "pre",
@@ -17,6 +27,14 @@ export default function fynixPlugin(options = {}) {
             const shouldInclude = include.some((ext) => normalizedId.endsWith(ext));
             if (!shouldInclude)
                 return null;
+            if (!hasJsxLike(code)) {
+                return null;
+            }
+            const contentHash = getContentHash(code);
+            const cached = transformCache.get(normalizedId);
+            if (cached && cached.contentHash === contentHash) {
+                return { code: cached.code, map: cached.map };
+            }
             const ctx = this;
             if (typeof ctx.addWatchFile === "function") {
                 ctx.addWatchFile(id);
@@ -39,16 +57,19 @@ export default function fynixPlugin(options = {}) {
                     loader,
                     jsxFactory,
                     jsxFragment,
-                    sourcemap,
+                    sourcemap: false,
                     sourcefile: id,
                     target: "esnext",
                     format: "esm",
                     ...esbuildOptions,
                 });
-                return {
+                const transformed = {
                     code: result.code,
-                    map: result.map || null,
+                    map: null,
+                    contentHash,
                 };
+                transformCache.set(normalizedId, transformed);
+                return { code: transformed.code, map: transformed.map };
             }
             catch (error) {
                 const err = error;
@@ -71,6 +92,7 @@ export default function fynixPlugin(options = {}) {
         handleHotUpdate(ctx) {
             const { file, server } = ctx;
             const normalizedFile = normalizePath(file);
+            transformCache.delete(normalizedFile);
             const shouldReload = include.some((ext) => normalizedFile.endsWith(ext));
             if (shouldReload) {
                 console.log(`\x1b[32m[vite-plugin-fynix]\x1b[0m HMR: full-reload triggered by ${normalizedFile}`);