chai-tailwind-js 1.0.2 → 1.0.4

package/dist/chai-tailwind.global.js

@@ -1,34 +1,516 @@
-var chaiTailwind = (() => {
-  var __defProp = Object.defineProperty;
-  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-  var __getOwnPropNames = Object.getOwnPropertyNames;
-  var __hasOwnProp = Object.prototype.hasOwnProperty;
-  var __export = (target, all) => {
-    for (var name in all)
-      __defProp(target, name, { get: all[name], enumerable: true });
+(() => {
+  // src/core/scanner.js
+  function scanDOM() {
+    const elements = document.querySelectorAll("[class]");
+    return elements;
+  }
+
+  // src/utils/config.js
+  var spacing = {};
+  for (let i = 0; i <= 20; i++) {
+    spacing[i] = `${i * 4}px`;
+  }
+  var config = {
+    spacing,
+    colors: {
+      red: {
+        100: "#fee2e2",
+        300: "#fca5a5",
+        500: "#ef4444",
+        700: "#b91c1c"
+      },
+      blue: {
+        100: "#dbeafe",
+        300: "#93c5fd",
+        500: "#3b82f6",
+        700: "#1d4ed8"
+      },
+      green: {
+        100: "#dcfce7",
+        300: "#86efac",
+        500: "#22c55e",
+        700: "#15803d"
+      },
+      yellow: {
+        100: "#fef9c3",
+        300: "#fde047",
+        500: "#eab308",
+        700: "#a16207"
+      },
+      purple: {
+        100: "#f3e8ff",
+        300: "#d8b4fe",
+        500: "#a855f7",
+        700: "#7e22ce"
+      },
+      pink: {
+        100: "#fce7f3",
+        300: "#f9a8d4",
+        500: "#ec4899",
+        700: "#be185d"
+      },
+      black: "black",
+      white: "white"
+    },
+    fontSize: {
+      xs: "12px",
+      sm: "14px",
+      base: "16px",
+      lg: "18px",
+      xl: "20px",
+      "2xl": "24px",
+      "3xl": "28px",
+      "4xl": "32px",
+      "5xl": "40px"
+    },
+    fontWeight: {
+      thin: 100,
+      light: 300,
+      normal: 400,
+      medium: 500,
+      bold: 700
+    },
+    letterSpacing: {
+      tight: "-0.05em",
+      normal: "0",
+      wide: "0.05em"
+    },
+    lineHeight: {
+      none: "1",
+      tight: "1.25",
+      normal: "1.5",
+      loose: "2"
+    },
+    borderRadius: {
+      none: "0px",
+      sm: "4px",
+      DEFAULT: "8px",
+      md: "10px",
+      lg: "12px",
+      xl: "16px",
+      full: "9999px"
+    },
+    borderWidth: {
+      DEFAULT: "1px",
+      2: "2px",
+      4: "4px"
+    },
+    shadows: {
+      sm: "0 1px 3px rgba(0,0,0,0.1)",
+      DEFAULT: "0 4px 10px rgba(0,0,0,0.1)",
+      md: "0 6px 20px rgba(0,0,0,0.15)",
+      lg: "0 10px 30px rgba(0,0,0,0.2)"
+    },
+    zIndex: {
+      0: 0,
+      10: 10,
+      20: 20,
+      50: 50,
+      100: 100
+    },
+    transitionTiming: {
+      linear: "linear",
+      in: "ease-in",
+      out: "ease-out",
+      "in-out": "ease-in-out"
+    },
+    blur: {
+      none: "0px",
+      sm: "4px",
+      DEFAULT: "8px",
+      md: "12px",
+      lg: "16px",
+      xl: "24px"
+    },
+    opacity: {
+      0: "0",
+      5: "0.05",
+      10: "0.1",
+      20: "0.2",
+      25: "0.25",
+      30: "0.3",
+      40: "0.4",
+      50: "0.5",
+      60: "0.6",
+      70: "0.7",
+      75: "0.75",
+      80: "0.8",
+      90: "0.9",
+      95: "0.95",
+      100: "1"
+    },
+    display: {
+      block: "block",
+      inline: "inline",
+      "inline-block": "inline-block",
+      flex: "flex",
+      grid: "grid",
+      hidden: "none"
+    },
+    textAlign: {
+      left: "left",
+      center: "center",
+      right: "right",
+      justify: "justify"
+    },
+    widths: {
+      full: "100%",
+      half: "50%",
+      third: "33.333%",
+      quarter: "25%",
+      screen: "100vw",
+      auto: "auto"
+    },
+    heights: {
+      full: "100%",
+      screen: "100vh",
+      auto: "auto"
+    },
+    cursor: {
+      pointer: "pointer",
+      default: "default",
+      "not-allowed": "not-allowed"
+    },
+    overflow: {
+      hidden: "hidden",
+      auto: "auto",
+      scroll: "scroll",
+      visible: "visible"
+    }
   };
-  var __copyProps = (to, from, except, desc) => {
-    if (from && typeof from === "object" || typeof from === "function") {
-      for (let key of __getOwnPropNames(from))
-        if (!__hasOwnProp.call(to, key) && key !== except)
-          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+
+  // src/core/parser.js
+  function parseClass(cls) {
+    let hover = null;
+    let utility = cls;
+    if (cls.includes(":")) {
+      const parts2 = cls.split(":");
+      hover = parts2[0];
+      utility = parts2[1];
+    }
+    if (!utility.startsWith("chai-")) return null;
+    utility = utility.slice(5);
+    if (!utility.includes("-")) return null;
+    const parts = utility.split("-");
+    const prefix = parts[0];
+    const value = parts.slice(1).join("-");
+    return {
+      hover,
+      prefix,
+      value
+    };
+  }
+
+  // src/runtime/interpreter.js
+  var handlers = {
+    p: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.padding = s;
+    },
+    m: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.margin = s;
+    },
+    bg: (el, value) => {
+      const [color, shade] = value.split("-");
+      const c = config.colors[color]?.[shade];
+      if (c) el.style.backgroundColor = c;
+    },
+    text: (el, value) => {
+      const parts = value.split("-");
+      if (parts.length === 1) {
+        const size = config.fontSize[value];
+        if (size) return el.style.fontSize = size;
+        const color = config.colors[value];
+        if (color) el.style.color = color;
+      } else {
+        const [color, shade] = parts;
+        const c = config.colors[color]?.[shade];
+        if (c) el.style.color = c;
+      }
+    },
+    font: (el, value) => {
+      const fw = config.fontWeight[value];
+      if (fw) el.style.fontWeight = fw;
+    },
+    tracking: (el, value) => {
+      const ls = config.letterSpacing[value];
+      if (ls) el.style.letterSpacing = ls;
+    },
+    leading: (el, value) => {
+      const lh = config.lineHeight[value];
+      if (lh) el.style.lineHeight = lh;
+    },
+    uppercase: (el) => el.style.textTransform = "uppercase",
+    lowercase: (el) => el.style.textTransform = "lowercase",
+    capitalize: (el) => el.style.textTransform = "capitalize",
+    rounded: (el, value) => {
+      const r = config.borderRadius[value || "DEFAULT"];
+      if (r) el.style.borderRadius = r;
+    },
+    shadow: (el, value) => {
+      const s = config.shadows[value || "DEFAULT"];
+      if (s) el.style.boxShadow = s;
+    },
+    border: (el, value) => {
+      if (!value) {
+        el.style.borderWidth = config.borderWidth.DEFAULT;
+        el.style.borderStyle = "solid";
+        return;
+      }
+      if (config.borderWidth[value]) {
+        el.style.borderWidth = config.borderWidth[value];
+        el.style.borderStyle = "solid";
+        return;
+      }
+      const [color, shade] = value.split("-");
+      const c = config.colors[color]?.[shade] || config.colors[color];
+      if (c) {
+        el.style.border = `${config.borderWidth.DEFAULT} solid ${c}`;
+      }
+    },
+    flex: (el, value) => {
+      el.style.display = "flex";
+      if (value === "col") el.style.flexDirection = "column";
+      if (value === "row") el.style.flexDirection = "row";
+    },
+    justify: (el, value) => {
+      const map = {
+        start: "flex-start",
+        center: "center",
+        end: "flex-end",
+        between: "space-between",
+        around: "space-around",
+        evenly: "space-evenly"
+      };
+      if (map[value]) {
+        el.style.display = "flex";
+        el.style.justifyContent = map[value];
+      }
+    },
+    items: (el, value) => {
+      const map = {
+        start: "flex-start",
+        center: "center",
+        end: "flex-end",
+        stretch: "stretch",
+        baseline: "baseline"
+      };
+      if (map[value]) {
+        el.style.display = "flex";
+        el.style.alignItems = map[value];
+      }
+    },
+    grid: (el, value) => {
+      el.style.display = "grid";
+      if (value && value.startsWith("cols-")) {
+        const n = value.replace("cols-", "");
+        el.style.gridTemplateColumns = `repeat(${n}, 1fr)`;
+      }
+    },
+    gap: (el, value) => {
+      const g = config.spacing[value];
+      if (g) el.style.gap = g;
+    },
+    w: (el, value) => {
+      const named = config.widths[value];
+      if (named) {
+        el.style.width = named;
+        return;
+      }
+      const s = config.spacing[value];
+      if (s) el.style.width = s;
+    },
+    h: (el, value) => {
+      const named = config.heights[value];
+      if (named) {
+        el.style.height = named;
+        return;
+      }
+      const s = config.spacing[value];
+      if (s) el.style.height = s;
+    },
+    align: (el, value) => {
+      const a = config.textAlign[value];
+      if (a) el.style.textAlign = a;
+    },
+    cursor: (el, value) => {
+      const c = config.cursor[value];
+      if (c) el.style.cursor = c;
+    },
+    overflow: (el, value) => {
+      const o = config.overflow[value];
+      if (o) el.style.overflow = o;
+    },
+    opacity: (el, value) => {
+      el.style.opacity = value / 100;
+    },
+    relative: (el) => el.style.position = "relative",
+    absolute: (el) => el.style.position = "absolute",
+    top: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.top = s;
+    },
+    left: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.left = s;
+    },
+    z: (el, value) => {
+      const z = config.zIndex[value];
+      if (z !== void 0) el.style.zIndex = z;
+    },
+    transition: (el) => {
+      el.style.transition = "all 0.2s ease";
+    },
+    duration: (el, value) => {
+      el.style.transitionDuration = `${value}ms`;
+    },
+    ease: (el, value) => {
+      const t = config.transitionTiming[value];
+      if (t) el.style.transitionTimingFunction = t;
+    },
+    scale: (el, value) => {
+      el.style.transform = `scale(${value / 100})`;
+    },
+    px: (el, value) => {
+      const s = config.spacing[value];
+      if (s) {
+        el.style.paddingLeft = s;
+        el.style.paddingRight = s;
+      }
+    },
+    py: (el, value) => {
+      const s = config.spacing[value];
+      if (s) {
+        el.style.paddingTop = s;
+        el.style.paddingBottom = s;
+      }
+    },
+    mx: (el, value) => {
+      const s = config.spacing[value];
+      if (s) {
+        el.style.marginLeft = s;
+        el.style.marginRight = s;
+      }
+    },
+    my: (el, value) => {
+      const s = config.spacing[value];
+      if (s) {
+        el.style.marginTop = s;
+        el.style.marginBottom = s;
+      }
+    },
+    mt: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.marginTop = s;
+    },
+    mb: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.marginBottom = s;
+    },
+    ml: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.marginLeft = s;
+    },
+    mr: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.marginRight = s;
+    },
+    pt: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.paddingTop = s;
+    },
+    pb: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.paddingBottom = s;
+    },
+    pl: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.paddingLeft = s;
+    },
+    pr: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.paddingRight = s;
+    },
+    "space-x": (el, value) => {
+      const s = config.spacing[value];
+      if (s) {
+        Array.from(el.children).forEach((child, idx) => {
+          if (idx > 0) child.style.marginLeft = s;
+        });
+      }
+    },
+    "space-y": (el, value) => {
+      const s = config.spacing[value];
+      if (s) {
+        Array.from(el.children).forEach((child, idx) => {
+          if (idx > 0) child.style.marginTop = s;
+        });
+      }
+    },
+    "backdrop-blur": (el, value) => {
+      const b = config.blur[value || "DEFAULT"];
+      if (b) el.style.backdropFilter = `blur(${b})`;
+    },
+    "bg-opacity": (el, value) => {
+      const opacity = config.opacity[value];
+      if (opacity !== void 0) {
+        const bgColor = window.getComputedStyle(el).backgroundColor;
+        const rgbaColor = bgColor.replace(/rgba?\(/, "rgba(").replace(/\)/, `)`);
+        const match = rgbaColor.match(/(rgba?\([^,]+,[^,]+,[^,]+),/);
+        if (match) {
+          el.style.backgroundColor = `${match[1]}, ${opacity})`;
+        }
+      }
+    },
+    hidden: (el) => el.style.display = "none",
+    block: (el) => el.style.display = "block",
+    inline: (el) => el.style.display = "inline",
+    right: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.right = s;
+    },
+    bottom: (el, value) => {
+      const s = config.spacing[value];
+      if (s) el.style.bottom = s;
     }
-    return to;
   };
-  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+  function interpretClass(element, cls) {
+    const parsed = parseClass(cls);
+    if (!parsed) return;
+    const { hover, prefix, value } = parsed;
+    const handler = handlers[prefix];
+    if (!handler) return;
+    if (!hover) {
+      handler(element, value);
+    }
+    if (hover === "hover") {
+      const original = element.style.cssText;
+      element.addEventListener("mouseenter", () => {
+        handler(element, value);
+      });
+      element.addEventListener("mouseleave", () => {
+        element.style.cssText = original;
+      });
+    }
+  }
+
+  // src/core/styler.js
+  function applyStyles(elements) {
+    elements.forEach((element) => {
+      element.classList.forEach((cls) => {
+        interpretClass(element, cls);
+      });
+    });
+  }
 
   // src/index.js
-  var index_exports = {};
-  __export(index_exports, {
-    default: () => index_default
-  });
   function chaiTailwind() {
     const elements = scanDOM();
     applyStyles(elements);
   }
   var index_default = chaiTailwind;
-  if (typeof window !== "undefined") {
-    window.chaiTailwind = chaiTailwind;
-  }
-  return __toCommonJS(index_exports);
+
+  // src/browser.js
+  window.chaiTailwind = index_default;
 })();

package/dist/chai-tailwind.js

@@ -1,12 +1,514 @@
+// src/core/scanner.js
+function scanDOM() {
+  const elements = document.querySelectorAll("[class]");
+  return elements;
+}
+
+// src/utils/config.js
+var spacing = {};
+for (let i = 0; i <= 20; i++) {
+  spacing[i] = `${i * 4}px`;
+}
+var config = {
+  spacing,
+  colors: {
+    red: {
+      100: "#fee2e2",
+      300: "#fca5a5",
+      500: "#ef4444",
+      700: "#b91c1c"
+    },
+    blue: {
+      100: "#dbeafe",
+      300: "#93c5fd",
+      500: "#3b82f6",
+      700: "#1d4ed8"
+    },
+    green: {
+      100: "#dcfce7",
+      300: "#86efac",
+      500: "#22c55e",
+      700: "#15803d"
+    },
+    yellow: {
+      100: "#fef9c3",
+      300: "#fde047",
+      500: "#eab308",
+      700: "#a16207"
+    },
+    purple: {
+      100: "#f3e8ff",
+      300: "#d8b4fe",
+      500: "#a855f7",
+      700: "#7e22ce"
+    },
+    pink: {
+      100: "#fce7f3",
+      300: "#f9a8d4",
+      500: "#ec4899",
+      700: "#be185d"
+    },
+    black: "black",
+    white: "white"
+  },
+  fontSize: {
+    xs: "12px",
+    sm: "14px",
+    base: "16px",
+    lg: "18px",
+    xl: "20px",
+    "2xl": "24px",
+    "3xl": "28px",
+    "4xl": "32px",
+    "5xl": "40px"
+  },
+  fontWeight: {
+    thin: 100,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    bold: 700
+  },
+  letterSpacing: {
+    tight: "-0.05em",
+    normal: "0",
+    wide: "0.05em"
+  },
+  lineHeight: {
+    none: "1",
+    tight: "1.25",
+    normal: "1.5",
+    loose: "2"
+  },
+  borderRadius: {
+    none: "0px",
+    sm: "4px",
+    DEFAULT: "8px",
+    md: "10px",
+    lg: "12px",
+    xl: "16px",
+    full: "9999px"
+  },
+  borderWidth: {
+    DEFAULT: "1px",
+    2: "2px",
+    4: "4px"
+  },
+  shadows: {
+    sm: "0 1px 3px rgba(0,0,0,0.1)",
+    DEFAULT: "0 4px 10px rgba(0,0,0,0.1)",
+    md: "0 6px 20px rgba(0,0,0,0.15)",
+    lg: "0 10px 30px rgba(0,0,0,0.2)"
+  },
+  zIndex: {
+    0: 0,
+    10: 10,
+    20: 20,
+    50: 50,
+    100: 100
+  },
+  transitionTiming: {
+    linear: "linear",
+    in: "ease-in",
+    out: "ease-out",
+    "in-out": "ease-in-out"
+  },
+  blur: {
+    none: "0px",
+    sm: "4px",
+    DEFAULT: "8px",
+    md: "12px",
+    lg: "16px",
+    xl: "24px"
+  },
+  opacity: {
+    0: "0",
+    5: "0.05",
+    10: "0.1",
+    20: "0.2",
+    25: "0.25",
+    30: "0.3",
+    40: "0.4",
+    50: "0.5",
+    60: "0.6",
+    70: "0.7",
+    75: "0.75",
+    80: "0.8",
+    90: "0.9",
+    95: "0.95",
+    100: "1"
+  },
+  display: {
+    block: "block",
+    inline: "inline",
+    "inline-block": "inline-block",
+    flex: "flex",
+    grid: "grid",
+    hidden: "none"
+  },
+  textAlign: {
+    left: "left",
+    center: "center",
+    right: "right",
+    justify: "justify"
+  },
+  widths: {
+    full: "100%",
+    half: "50%",
+    third: "33.333%",
+    quarter: "25%",
+    screen: "100vw",
+    auto: "auto"
+  },
+  heights: {
+    full: "100%",
+    screen: "100vh",
+    auto: "auto"
+  },
+  cursor: {
+    pointer: "pointer",
+    default: "default",
+    "not-allowed": "not-allowed"
+  },
+  overflow: {
+    hidden: "hidden",
+    auto: "auto",
+    scroll: "scroll",
+    visible: "visible"
+  }
+};
+
+// src/core/parser.js
+function parseClass(cls) {
+  let hover = null;
+  let utility = cls;
+  if (cls.includes(":")) {
+    const parts2 = cls.split(":");
+    hover = parts2[0];
+    utility = parts2[1];
+  }
+  if (!utility.startsWith("chai-")) return null;
+  utility = utility.slice(5);
+  if (!utility.includes("-")) return null;
+  const parts = utility.split("-");
+  const prefix = parts[0];
+  const value = parts.slice(1).join("-");
+  return {
+    hover,
+    prefix,
+    value
+  };
+}
+
+// src/runtime/interpreter.js
+var handlers = {
+  p: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.padding = s;
+  },
+  m: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.margin = s;
+  },
+  bg: (el, value) => {
+    const [color, shade] = value.split("-");
+    const c = config.colors[color]?.[shade];
+    if (c) el.style.backgroundColor = c;
+  },
+  text: (el, value) => {
+    const parts = value.split("-");
+    if (parts.length === 1) {
+      const size = config.fontSize[value];
+      if (size) return el.style.fontSize = size;
+      const color = config.colors[value];
+      if (color) el.style.color = color;
+    } else {
+      const [color, shade] = parts;
+      const c = config.colors[color]?.[shade];
+      if (c) el.style.color = c;
+    }
+  },
+  font: (el, value) => {
+    const fw = config.fontWeight[value];
+    if (fw) el.style.fontWeight = fw;
+  },
+  tracking: (el, value) => {
+    const ls = config.letterSpacing[value];
+    if (ls) el.style.letterSpacing = ls;
+  },
+  leading: (el, value) => {
+    const lh = config.lineHeight[value];
+    if (lh) el.style.lineHeight = lh;
+  },
+  uppercase: (el) => el.style.textTransform = "uppercase",
+  lowercase: (el) => el.style.textTransform = "lowercase",
+  capitalize: (el) => el.style.textTransform = "capitalize",
+  rounded: (el, value) => {
+    const r = config.borderRadius[value || "DEFAULT"];
+    if (r) el.style.borderRadius = r;
+  },
+  shadow: (el, value) => {
+    const s = config.shadows[value || "DEFAULT"];
+    if (s) el.style.boxShadow = s;
+  },
+  border: (el, value) => {
+    if (!value) {
+      el.style.borderWidth = config.borderWidth.DEFAULT;
+      el.style.borderStyle = "solid";
+      return;
+    }
+    if (config.borderWidth[value]) {
+      el.style.borderWidth = config.borderWidth[value];
+      el.style.borderStyle = "solid";
+      return;
+    }
+    const [color, shade] = value.split("-");
+    const c = config.colors[color]?.[shade] || config.colors[color];
+    if (c) {
+      el.style.border = `${config.borderWidth.DEFAULT} solid ${c}`;
+    }
+  },
+  flex: (el, value) => {
+    el.style.display = "flex";
+    if (value === "col") el.style.flexDirection = "column";
+    if (value === "row") el.style.flexDirection = "row";
+  },
+  justify: (el, value) => {
+    const map = {
+      start: "flex-start",
+      center: "center",
+      end: "flex-end",
+      between: "space-between",
+      around: "space-around",
+      evenly: "space-evenly"
+    };
+    if (map[value]) {
+      el.style.display = "flex";
+      el.style.justifyContent = map[value];
+    }
+  },
+  items: (el, value) => {
+    const map = {
+      start: "flex-start",
+      center: "center",
+      end: "flex-end",
+      stretch: "stretch",
+      baseline: "baseline"
+    };
+    if (map[value]) {
+      el.style.display = "flex";
+      el.style.alignItems = map[value];
+    }
+  },
+  grid: (el, value) => {
+    el.style.display = "grid";
+    if (value && value.startsWith("cols-")) {
+      const n = value.replace("cols-", "");
+      el.style.gridTemplateColumns = `repeat(${n}, 1fr)`;
+    }
+  },
+  gap: (el, value) => {
+    const g = config.spacing[value];
+    if (g) el.style.gap = g;
+  },
+  w: (el, value) => {
+    const named = config.widths[value];
+    if (named) {
+      el.style.width = named;
+      return;
+    }
+    const s = config.spacing[value];
+    if (s) el.style.width = s;
+  },
+  h: (el, value) => {
+    const named = config.heights[value];
+    if (named) {
+      el.style.height = named;
+      return;
+    }
+    const s = config.spacing[value];
+    if (s) el.style.height = s;
+  },
+  align: (el, value) => {
+    const a = config.textAlign[value];
+    if (a) el.style.textAlign = a;
+  },
+  cursor: (el, value) => {
+    const c = config.cursor[value];
+    if (c) el.style.cursor = c;
+  },
+  overflow: (el, value) => {
+    const o = config.overflow[value];
+    if (o) el.style.overflow = o;
+  },
+  opacity: (el, value) => {
+    el.style.opacity = value / 100;
+  },
+  relative: (el) => el.style.position = "relative",
+  absolute: (el) => el.style.position = "absolute",
+  top: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.top = s;
+  },
+  left: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.left = s;
+  },
+  z: (el, value) => {
+    const z = config.zIndex[value];
+    if (z !== void 0) el.style.zIndex = z;
+  },
+  transition: (el) => {
+    el.style.transition = "all 0.2s ease";
+  },
+  duration: (el, value) => {
+    el.style.transitionDuration = `${value}ms`;
+  },
+  ease: (el, value) => {
+    const t = config.transitionTiming[value];
+    if (t) el.style.transitionTimingFunction = t;
+  },
+  scale: (el, value) => {
+    el.style.transform = `scale(${value / 100})`;
+  },
+  px: (el, value) => {
+    const s = config.spacing[value];
+    if (s) {
+      el.style.paddingLeft = s;
+      el.style.paddingRight = s;
+    }
+  },
+  py: (el, value) => {
+    const s = config.spacing[value];
+    if (s) {
+      el.style.paddingTop = s;
+      el.style.paddingBottom = s;
+    }
+  },
+  mx: (el, value) => {
+    const s = config.spacing[value];
+    if (s) {
+      el.style.marginLeft = s;
+      el.style.marginRight = s;
+    }
+  },
+  my: (el, value) => {
+    const s = config.spacing[value];
+    if (s) {
+      el.style.marginTop = s;
+      el.style.marginBottom = s;
+    }
+  },
+  mt: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.marginTop = s;
+  },
+  mb: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.marginBottom = s;
+  },
+  ml: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.marginLeft = s;
+  },
+  mr: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.marginRight = s;
+  },
+  pt: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.paddingTop = s;
+  },
+  pb: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.paddingBottom = s;
+  },
+  pl: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.paddingLeft = s;
+  },
+  pr: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.paddingRight = s;
+  },
+  "space-x": (el, value) => {
+    const s = config.spacing[value];
+    if (s) {
+      Array.from(el.children).forEach((child, idx) => {
+        if (idx > 0) child.style.marginLeft = s;
+      });
+    }
+  },
+  "space-y": (el, value) => {
+    const s = config.spacing[value];
+    if (s) {
+      Array.from(el.children).forEach((child, idx) => {
+        if (idx > 0) child.style.marginTop = s;
+      });
+    }
+  },
+  "backdrop-blur": (el, value) => {
+    const b = config.blur[value || "DEFAULT"];
+    if (b) el.style.backdropFilter = `blur(${b})`;
+  },
+  "bg-opacity": (el, value) => {
+    const opacity = config.opacity[value];
+    if (opacity !== void 0) {
+      const bgColor = window.getComputedStyle(el).backgroundColor;
+      const rgbaColor = bgColor.replace(/rgba?\(/, "rgba(").replace(/\)/, `)`);
+      const match = rgbaColor.match(/(rgba?\([^,]+,[^,]+,[^,]+),/);
+      if (match) {
+        el.style.backgroundColor = `${match[1]}, ${opacity})`;
+      }
+    }
+  },
+  hidden: (el) => el.style.display = "none",
+  block: (el) => el.style.display = "block",
+  inline: (el) => el.style.display = "inline",
+  right: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.right = s;
+  },
+  bottom: (el, value) => {
+    const s = config.spacing[value];
+    if (s) el.style.bottom = s;
+  }
+};
+function interpretClass(element, cls) {
+  const parsed = parseClass(cls);
+  if (!parsed) return;
+  const { hover, prefix, value } = parsed;
+  const handler = handlers[prefix];
+  if (!handler) return;
+  if (!hover) {
+    handler(element, value);
+  }
+  if (hover === "hover") {
+    const original = element.style.cssText;
+    element.addEventListener("mouseenter", () => {
+      handler(element, value);
+    });
+    element.addEventListener("mouseleave", () => {
+      element.style.cssText = original;
+    });
+  }
+}
+
+// src/core/styler.js
+function applyStyles(elements) {
+  elements.forEach((element) => {
+    element.classList.forEach((cls) => {
+      interpretClass(element, cls);
+    });
+  });
+}
+
 // src/index.js
 function chaiTailwind() {
   const elements = scanDOM();
   applyStyles(elements);
 }
 var index_default = chaiTailwind;
-if (typeof window !== "undefined") {
-  window.chaiTailwind = chaiTailwind;
-}
 export {
   index_default as default
 };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "chai-tailwind-js",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "main": "dist/chai-tailwind.js",
   "type": "module",
   "scripts": {
     "build": "npm run build:esm && npm run build:global",
     "build:esm": "esbuild src/index.js --bundle --format=esm --outfile=dist/chai-tailwind.js",
-    "build:global": "esbuild src/index.js --bundle --format=iife --global-name=chaiTailwind --outfile=dist/chai-tailwind.global.js"
+    "build:global": "esbuild src/browser.js --bundle --format=iife --outfile=dist/chai-tailwind.global.js"
   },
   "keywords": [],
   "author": "",