chaiwind 2.1.1 → 3.0.0

package/src/engine.js

@@ -0,0 +1,144 @@
+/**
+ * engine.js
+ * The core of chaiwind — 3 responsibilities:
+ *
+ *  1. parseClass(cls)      — breaks 'chai-bg-piyush' into { utility, value }
+ *  2. applyClass(el, cls)  — applies inline style + removes the class
+ *  3. init()               — scans DOM on load + watches live with MutationObserver
+ */
+
+import { handlers } from "./handlers.js";
+
+// ─── 1. PARSER ────────────────────────────────────────────────────────────────
+// Input:  'chai-bg-piyush-dark'
+// Output: { utility: 'bg', value: 'piyush-dark' }
+//
+// Steps:
+//  - slice(5)         removes the 'chai-' prefix  →  'bg-piyush-dark'
+//  - indexOf('-')     finds the first dash         →  index 2
+//  - slice(0, 2)      gets the utility             →  'bg'
+//  - slice(3)         gets the value               →  'piyush-dark'
+//
+// Edge case: 'chai-flex' has no value
+//  - indexOf('-') returns -1
+//  - utility = 'flex', value = ''
+
+function parseClass(cls) {
+  const raw = cls.slice(5); // strip 'chai-'
+  const dashIdx = raw.indexOf("-"); // find first dash
+
+  const utility = dashIdx === -1 ? raw : raw.slice(0, dashIdx);
+  const value = dashIdx === -1 ? "" : raw.slice(dashIdx + 1);
+
+  return { utility, value };
+}
+
+// ─── 2. APPLY CLASS ───────────────────────────────────────────────────────────
+// Takes one element and one class name
+// Looks up the handler, calls it, removes the class
+
+function applyClass(el, cls) {
+  const { utility, value } = parseClass(cls);
+
+  // look up the handler for this utility
+  const handler = handlers[utility];
+
+  if (handler) {
+    handler(el, value); // e.g. handlers['bg'](el, 'piyush')
+  }
+  // unknown utility — silently skip, just remove the class
+
+  // requirement: always remove chai- class after processing
+  el.classList.remove(cls);
+}
+
+// ─── 3. PROCESS ELEMENT ───────────────────────────────────────────────────────
+// Takes one element, finds all chai- classes on it, applies each one
+// We snapshot classList into an Array first — important!
+// Because we're removing classes inside the loop,
+// iterating el.classList live would skip some classes
+
+function processElement(el) {
+  // only process actual HTML elements, skip text nodes / comment nodes
+  if (el.nodeType !== 1) return;
+
+  // snapshot into array so removals don't affect iteration
+  const classes = Array.from(el.classList);
+
+  classes.forEach((cls) => {
+    if (cls.startsWith("chai-")) {
+      applyClass(el, cls);
+    }
+  });
+}
+
+// ─── 4. SCAN ──────────────────────────────────────────────────────────────────
+// Runs once — traverses the entire DOM
+// Finds every element that has at least one chai- class
+
+function scan() {
+  // querySelectorAll('[class]') — grabs every element that has a class attribute
+  // this is faster than grabbing ALL elements and checking each one
+  const elements = document.querySelectorAll("[class]");
+  elements.forEach((el) => processElement(el));
+}
+
+// ─── 5. MUTATIONOBSERVER ──────────────────────────────────────────────────────
+// Watches the DOM live — any element added after page load also gets processed
+// This handles: JS frameworks, dynamic content, setTimeout additions etc.
+//
+// mutation.addedNodes = list of nodes added in this mutation
+// We process each added node + all its children (querySelectorAll inside it)
+
+function watch() {
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      for (const node of mutation.addedNodes) {
+        // skip text nodes, comment nodes — only process elements
+        if (node.nodeType !== 1) continue;
+
+        // process the element itself
+        processElement(node);
+
+        // process any children inside it too
+        // e.g. a whole section added at once — scan everything inside
+        node
+          .querySelectorAll("[class]")
+          .forEach((child) => processElement(child));
+      }
+    }
+  });
+
+  // observe the entire document body
+  // childList: true  → watch for elements being added or removed
+  // subtree: true    → watch ALL descendants, not just direct children
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+  });
+}
+
+// ─── 6. INIT ──────────────────────────────────────────────────────────────────
+// Called from index.js
+// Handles two cases:
+//   - script in <head>  → HTML not parsed yet → wait for DOMContentLoaded
+//   - script at <body>  → HTML already parsed  → run immediately
+
+export function init() {
+  if (document.readyState === "loading") {
+    // DOM not ready yet — wait
+    document.addEventListener("DOMContentLoaded", () => {
+      scan();
+      watch();
+    });
+  } else {
+    // DOM already ready — run now
+    scan();
+    watch();
+  }
+
+  console.log(
+    "%c☕ chaiwind ready",
+    "color: #c8843a; font-weight: bold; font-size: 13px;",
+  );
+}

package/src/handlers.js

@@ -0,0 +1,218 @@
+/**
+ * handlers.js
+ * Maps every chai-* utility to a function that sets el.style directly
+ *
+ * Structure:
+ *   'utility': (el, value) => el.style.someProperty = resolvedValue
+ *
+ * How it's used in engine.js:
+ *   handlers['bg'](el, 'piyush')  →  el.style.backgroundColor = '#ec4899'
+ */
+
+import { colors, spacing, fontSizes, radii, shadows } from "./tokens.js";
+
+export const handlers = {
+  // ── padding ───────────────────────────────────────────────────────────────
+  p: (el, v) => (el.style.padding = spacing[v] || v + "px"),
+  px: (el, v) => {
+    el.style.paddingLeft = spacing[v] || v + "px";
+    el.style.paddingRight = spacing[v] || v + "px";
+  },
+  py: (el, v) => {
+    el.style.paddingTop = spacing[v] || v + "px";
+    el.style.paddingBottom = spacing[v] || v + "px";
+  },
+  pt: (el, v) => (el.style.paddingTop = spacing[v] || v + "px"),
+  pb: (el, v) => (el.style.paddingBottom = spacing[v] || v + "px"),
+  pl: (el, v) => (el.style.paddingLeft = spacing[v] || v + "px"),
+  pr: (el, v) => (el.style.paddingRight = spacing[v] || v + "px"),
+
+  // ── margin ────────────────────────────────────────────────────────────────
+  m: (el, v) => (el.style.margin = spacing[v] || v + "px"),
+  mx: (el, v) => {
+    el.style.marginLeft = spacing[v] || v + "px";
+    el.style.marginRight = spacing[v] || v + "px";
+  },
+  my: (el, v) => {
+    el.style.marginTop = spacing[v] || v + "px";
+    el.style.marginBottom = spacing[v] || v + "px";
+  },
+  mt: (el, v) => (el.style.marginTop = spacing[v] || v + "px"),
+  mb: (el, v) => (el.style.marginBottom = spacing[v] || v + "px"),
+  ml: (el, v) => (el.style.marginLeft = spacing[v] || v + "px"),
+  mr: (el, v) => (el.style.marginRight = spacing[v] || v + "px"),
+
+  // ── gap ───────────────────────────────────────────────────────────────────
+  gap: (el, v) => (el.style.gap = spacing[v] || v + "px"),
+
+  // ── colors ────────────────────────────────────────────────────────────────
+  // chai-bg-chai, chai-bg-red, chai-bg-#ff0000
+  bg: (el, v) => (el.style.backgroundColor = colors[v] || v),
+  border: (el, v) => {
+    // chai-border        → just adds a solid border
+    // chai-border-chai   → solid border with chai color
+    if (!v) {
+      el.style.border = "1px solid currentColor";
+    } else {
+      el.style.border = "1px solid " + (colors[v] || v);
+    }
+  },
+
+  // ── text — handles 3 things: color, size, alignment ──────────────────────
+  // chai-text-chai     → color
+  // chai-text-xl       → font size
+  // chai-text-center   → text align
+  text: (el, v) => {
+    if (colors[v]) el.style.color = colors[v];
+    else if (fontSizes[v]) el.style.fontSize = fontSizes[v];
+    else el.style.textAlign = v;
+  },
+
+  // ── font ──────────────────────────────────────────────────────────────────
+  font: (el, v) => {
+    const weightMap = {
+      thin: "100",
+      light: "300",
+      normal: "400",
+      medium: "500",
+      semibold: "600",
+      bold: "700",
+      black: "900",
+    };
+    if (weightMap[v]) el.style.fontWeight = weightMap[v];
+  },
+
+  // ── border radius ─────────────────────────────────────────────────────────
+  // chai-rounded-md, chai-rounded-full, chai-rounded-20 (raw px)
+  rounded: (el, v) => (el.style.borderRadius = radii[v] || v + "px"),
+
+  // ── shadow ────────────────────────────────────────────────────────────────
+  shadow: (el, v) => (el.style.boxShadow = shadows[v] || v),
+
+  // ── opacity ───────────────────────────────────────────────────────────────
+  // chai-opacity-50 → 0.5
+  opacity: (el, v) => (el.style.opacity = String(Number(v) / 100)),
+
+  // ── sizing ────────────────────────────────────────────────────────────────
+  w: (el, v) => {
+    if (v === "full") el.style.width = "100%";
+    else if (v === "screen") el.style.width = "100vw";
+    else if (v === "auto") el.style.width = "auto";
+    else el.style.width = spacing[v] || v + "px";
+  },
+  h: (el, v) => {
+    if (v === "full") el.style.height = "100%";
+    else if (v === "screen") el.style.height = "100vh";
+    else if (v === "auto") el.style.height = "auto";
+    else el.style.height = spacing[v] || v + "px";
+  },
+  "max-w": (el, v) => (el.style.maxWidth = spacing[v] || v + "px"),
+  "min-h": (el, v) =>
+    (el.style.minHeight = v === "screen" ? "100vh" : spacing[v] || v + "px"),
+  "min-w": (el, v) =>
+    (el.style.minWidth = v === "full" ? "100%" : spacing[v] || v + "px"),
+
+  // ── display ───────────────────────────────────────────────────────────────
+  flex: (el) => (el.style.display = "flex"),
+  grid: (el) => (el.style.display = "grid"),
+  block: (el) => (el.style.display = "block"),
+  "inline-block": (el) => (el.style.display = "inline-block"),
+  inline: (el) => (el.style.display = "inline"),
+  hidden: (el) => (el.style.display = "none"),
+
+  // ── flexbox ───────────────────────────────────────────────────────────────
+  "flex-col": (el) => (el.style.flexDirection = "column"),
+  "flex-row": (el) => (el.style.flexDirection = "row"),
+  "flex-wrap": (el) => (el.style.flexWrap = "wrap"),
+  "flex-1": (el) => (el.style.flex = "1"),
+  items: (el, v) => {
+    const map = {
+      center: "center",
+      start: "flex-start",
+      end: "flex-end",
+      stretch: "stretch",
+    };
+    el.style.alignItems = map[v] || v;
+  },
+  justify: (el, v) => {
+    const map = {
+      center: "center",
+      start: "flex-start",
+      end: "flex-end",
+      between: "space-between",
+      around: "space-around",
+      evenly: "space-evenly",
+    };
+    el.style.justifyContent = map[v] || v;
+  },
+
+  // ── grid ──────────────────────────────────────────────────────────────────
+  "grid-cols": (el, v) => (el.style.gridTemplateColumns = `repeat(${v}, 1fr)`),
+  "col-span": (el, v) => (el.style.gridColumn = `span ${v}`),
+
+  // ── position ──────────────────────────────────────────────────────────────
+  relative: (el) => (el.style.position = "relative"),
+  absolute: (el) => (el.style.position = "absolute"),
+  fixed: (el) => (el.style.position = "fixed"),
+  sticky: (el) => {
+    el.style.position = "sticky";
+    el.style.top = "0";
+  },
+
+  // ── overflow ──────────────────────────────────────────────────────────────
+  overflow: (el, v) => (el.style.overflow = v || "hidden"),
+  "overflow-x": (el, v) => (el.style.overflowX = v || "auto"),
+  "overflow-y": (el, v) => (el.style.overflowY = v || "auto"),
+
+  // ── z-index ───────────────────────────────────────────────────────────────
+  z: (el, v) => (el.style.zIndex = v),
+
+  // ── typography ────────────────────────────────────────────────────────────
+  uppercase: (el) => (el.style.textTransform = "uppercase"),
+  lowercase: (el) => (el.style.textTransform = "lowercase"),
+  capitalize: (el) => (el.style.textTransform = "capitalize"),
+  italic: (el) => (el.style.fontStyle = "italic"),
+  underline: (el) => (el.style.textDecoration = "underline"),
+  "line-through": (el) => (el.style.textDecoration = "line-through"),
+  "no-underline": (el) => (el.style.textDecoration = "none"),
+  truncate: (el) => {
+    el.style.overflow = "hidden";
+    el.style.textOverflow = "ellipsis";
+    el.style.whiteSpace = "nowrap";
+  },
+  leading: (el, v) => {
+    const map = {
+      none: "1",
+      tight: "1.25",
+      snug: "1.375",
+      normal: "1.5",
+      relaxed: "1.625",
+      loose: "2",
+    };
+    el.style.lineHeight = map[v] || v;
+  },
+  tracking: (el, v) => {
+    const map = {
+      tight: "-0.05em",
+      normal: "0",
+      wide: "0.05em",
+      wider: "0.1em",
+      widest: "0.2em",
+    };
+    el.style.letterSpacing = map[v] || v;
+  },
+
+  // ── cursor ────────────────────────────────────────────────────────────────
+  cursor: (el, v) => (el.style.cursor = v),
+
+  // ── misc ──────────────────────────────────────────────────────────────────
+  transition: (el, v) =>
+    (el.style.transition = v === "none" ? "none" : "all 150ms ease"),
+  "select-none": (el) => (el.style.userSelect = "none"),
+  "object-cover": (el) => (el.style.objectFit = "cover"),
+  "object-contain": (el) => (el.style.objectFit = "contain"),
+  "mx-auto": (el) => {
+    el.style.marginLeft = "auto";
+    el.style.marginRight = "auto";
+  },
+};

package/src/index.js

@@ -0,0 +1,20 @@
+/**
+ * index.js
+ * Entry point for chaiwind
+ *
+ * Usage with a bundler (Vite, webpack):
+ *   import { initChai } from 'chaiwind'
+ *   initChai()
+ *
+ * Usage in plain HTML:
+ *   <script type="module">
+ *     import { initChai } from './node_modules/chaiwind/src/index.js'
+ *     initChai()
+ *   </script>
+ */
+
+import { init } from "./engine.js";
+
+export function initChai() {
+  init();
+}

package/src/tokens.js

@@ -0,0 +1,141 @@
+/**
+ *   Hitesh sir  — chai, adrak, masala, kulhad, tapri, dudh
+ *   Piyush sir  — piyush, rose, blush, fuschia, lipstick
+ *   Akash sir   — midnight, spacegray, silver, starlight, macos-*
+ *   ChaiCode    — chaicode, chaicode-dark
+ */
+
+export const colors = {
+  // ── ChaiCode brand ────────────────────────────────────────────────────────
+  chaicode: "#f97316",
+  "chaicode-dark": "#1a1a2e",
+
+  // ── ☕ Hitesh sir — chai palette ──────────────────────────────────────────
+  chai: "#c8843a", // classic cutting chai
+  adrak: "#d4a056", // ginger gold
+  masala: "#8b4513", // deep masala brown
+  kulhad: "#b5651d", // clay kulhad
+  tapri: "#6b3a2a", // dark roasted tapri
+  dudh: "#f5f0e8", // milk chai cream
+
+  // ── 🍵 Tea Collection ─────────────────────────────────────────────────────
+  "green-tea": "#7fbf7f",
+  "chamomile-tea": "#f5e6a6",
+  "black-tea": "#3b2f2f",
+  "herbal-tea": "#a3c585",
+  "matcha-tea": "#6ea64d",
+  "white-tea": "#f2f2f2",
+  "masala-chai": "#c68642",
+  "darjeeling-tea": "#d4a373",
+  "irani-chai": "#b08968",
+  "oolong-tea": "#a47148",
+  "lemongrass-tea": "#c9e4a7",
+  "tandoori-chai": "#b7410e",
+  "chai-tea": "#8b5e3c",
+  "peach-tea": "#ffb07c",
+  "mate-tea": "#6b8e23",
+  "rooibos-tea": "#b22222",
+  "nilgiri-tea": "#5c4033",
+  "dark-tea": "#1c1c1c",
+
+  // ── 🩷 Piyush sir — pink palette ──────────────────────────────────────────
+  piyush: "#ec4899", // signature hot pink
+  "piyush-light": "#f9a8d4", // soft blush
+  "piyush-dark": "#be185d", // deep magenta
+  rose: "#fb7185", // rose
+  blush: "#fce7f3", // barely-there blush
+  fuschia: "#d946ef", // electric fuschia
+  lipstick: "#c2185b", // bold lipstick
+
+  // ── 🍎 Akash sir — Apple / Mac palette ────────────────────────────────────
+  midnight: "#1d1d1f", // Apple midnight black
+  spacegray: "#86868b", // Mac space gray
+  silver: "#e8e8ed", // Mac silver
+  starlight: "#f5f1eb", // MacBook starlight
+  "macos-blue": "#0071e3", // Apple blue
+  "macos-green": "#34c759", // Apple green
+  "macos-red": "#ff3b30", // Apple red
+  aluminum: "#d1d1d6", // aluminum body
+
+  // ── general colors ────────────────────────────────────────────────────────
+  white: "#ffffff",
+  black: "#000000",
+  transparent: "transparent",
+  red: "#ef4444",
+  orange: "#f97316",
+  yellow: "#eab308",
+  green: "#22c55e",
+  blue: "#3b82f6",
+  purple: "#a855f7",
+  pink: "#ec4899",
+  teal: "#14b8a6",
+  indigo: "#6366f1",
+  gray: "#6b7280",
+
+  // ── gray scale ────────────────────────────────────────────────────────────
+  "gray-50": "#f9fafb",
+  "gray-100": "#f3f4f6",
+  "gray-200": "#e5e7eb",
+  "gray-300": "#d1d5db",
+  "gray-400": "#9ca3af",
+  "gray-500": "#6b7280",
+  "gray-600": "#4b5563",
+  "gray-700": "#374151",
+  "gray-800": "#1f2937",
+  "gray-900": "#111827",
+};
+
+export const spacing = {
+  0: "0px",
+  1: "4px",
+  2: "8px",
+  3: "12px",
+  4: "16px",
+  5: "20px",
+  6: "24px",
+  7: "28px",
+  8: "32px",
+  9: "36px",
+  10: "40px",
+  12: "48px",
+  14: "56px",
+  16: "64px",
+  20: "80px",
+  24: "96px",
+  32: "128px",
+};
+
+export const fontSizes = {
+  xs: "11px",
+  sm: "13px",
+  base: "16px",
+  lg: "18px",
+  xl: "20px",
+  "2xl": "24px",
+  "3xl": "30px",
+  "4xl": "36px",
+  "5xl": "48px",
+  "6xl": "64px",
+};
+
+export const radii = {
+  none: "0px",
+  sm: "4px",
+  md: "8px",
+  lg: "12px",
+  xl: "16px",
+  "2xl": "24px",
+  full: "9999px",
+};
+
+export const shadows = {
+  sm: "0 1px 3px rgba(0,0,0,0.10)",
+  md: "0 4px 12px rgba(0,0,0,0.12)",
+  lg: "0 8px 24px rgba(0,0,0,0.15)",
+  xl: "0 16px 48px rgba(0,0,0,0.20)",
+  none: "none",
+  // ChaiCode special shadows
+  chai: "0 4px 20px rgba(200,132,58,0.35)",
+  piyush: "0 4px 20px rgba(236,72,153,0.30)",
+  mac: "0 8px 32px rgba(29,29,31,0.25)",
+};