@gaurav009/chai-ui 1.0.0 → 1.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gaurav009/chai-ui",
-  "version": "1.0.0",
-  "description": "A lightweight, **JavaScript-powered utility-first styling library** that brings a warm, chai-inspired design system to the browser — without any build tools.",
+  "version": "1.0.1",
+  "description": "Old-school chai-themed runtime CSS utility library",
   "homepage": "https://github.com/gaurav0973/css-utility-library#readme",
   "bugs": {
     "url": "https://github.com/gaurav0973/css-utility-library/issues"
@@ -13,12 +13,29 @@
   "license": "ISC",
   "author": "",
   "type": "module",
-  "main": "index.js",
+  "main": "dist/chai-ui.esm.js",
+  "module": "dist/chai-ui.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/chai-ui.esm.js",
+      "default": "./dist/chai-ui.esm.js"
+    }
+  },
+  "unpkg": "dist/chai-ui.js",
+  "jsdelivr": "dist/chai-ui.js",
+  "files": [
+    "dist",
+    "readme.md"
+  ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "clean": "node -e \"require('fs').rmSync('dist', { recursive: true, force: true })\"",
+    "build": "node scripts/build.mjs",
+    "prepublishOnly": "npm run build"
   },
-  "dependencies": {
+  "devDependencies": {
     "esbuild": "^0.25.12"
   },
-  "devDependencies": {}
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/readme.md

@@ -9,48 +9,15 @@ Retro spirit, modern utility flow: old-school look, runtime-first engine.
 ## 📦 NPM Quick Start
 
 ```bash
-npm install @gaurav009/chaiui
+npm install @gaurav009/chai-ui
 ```
 
-```html
-<script type="module">
-  import "@gaurav009/chaiui";
-</script>
-```
-
-CDN (after publish):
+CDN:
 
 ```html
-<script src="https://unpkg.com/@gaurav009/chaiui/dist/chai-ui.js"></script>
-```
-
----
-
-## 🛠️ Build For dist
-
-```bash
-npm install
-npm run build
+<script src="https://unpkg.com/@gaurav009/chai-ui/dist/chai-ui.js"></script>
 ```
 
-Build output:
-
-- `dist/chai-ui.esm.js` (ES module for npm import)
-- `dist/chai-ui.js` (browser IIFE for CDN)
-
----
-
-## 🚀 Publish To npm
-
-```bash
-npm login
-npm version patch
-npm publish
-```
-
-Tip: `prepublishOnly` script automatically runs build before publish.
-
----
 
 ## 🧠 What is chaiUi?
 

package/scripts/build.mjs

@@ -1,29 +0,0 @@
-import { mkdirSync } from "node:fs";
-import { build } from "esbuild";
-
-mkdirSync("dist", { recursive: true });
-
-const shared = {
-  entryPoints: ["src/index.js"],
-  bundle: true,
-  target: ["es2018"],
-  legalComments: "none",
-};
-
-await build({
-  ...shared,
-  format: "esm",
-  outfile: "dist/chai-ui.esm.js",
-  sourcemap: true,
-});
-
-await build({
-  ...shared,
-  format: "iife",
-  globalName: "chaiUi",
-  outfile: "dist/chai-ui.js",
-  sourcemap: true,
-  minify: true,
-});
-
-console.log("Build complete: dist/chai-ui.esm.js and dist/chai-ui.js");

package/src/core/01-engine.js

@@ -1,23 +0,0 @@
-import { parse } from "./02-parser.js";
-import { resolve } from "./03-resolver.js";
-import { applyStyles } from "./04-apply.js";
-
-export function init() {
-  // 1. sare css applied ellements ko pick karo
-  const elements = document.querySelectorAll("[chaiCss]");
-
-  elements.forEach((el) => {
-    // 2. "kinare-se-4 gol-kinara" => ["kinare-se-4", "gol-kinara"]
-    const tokens = parse(el.getAttribute("chaiCss") || "");
-
-    // 3. harr tokean ka matlab kya hai?
-    tokens.forEach((token) => {
-      // 4. kaun si utility kisko handover karni hai?
-      const styles = resolve(token);
-
-      if (styles)
-        // 5. apply the css
-        applyStyles(el, styles);
-    });
-  });
-}

package/src/core/02-parser.js

@@ -1,10 +0,0 @@
-// "p-4 bg-chai" → ["p-4", "bg-chai"]
-export function parse(cssStringClass) {
-  if (!cssStringClass) {
-    return [];
-  }
-  if (typeof cssStringClass !== "string") {
-    return [];
-  }
-  return cssStringClass.trim().split(/\s+/).filter(Boolean);
-}

package/src/core/03-resolver.js

@@ -1,17 +0,0 @@
-import { spacing } from "../utilities/spacing.js";
-import { layout } from "../utilities/layout.js";
-import { colors } from "../utilities/colors.js";
-import { typography } from "../utilities/typography.js";
-import { border } from "../utilities/border.js";
-import { effects } from "../utilities/effects.js";
-import { size } from "../utilities/size.js";
-import { display } from "../utilities/display.js";
-
-// Kaunsi utility kis function ko handle karegi?”
-export function resolve(token) {
-  return (
-    spacing(token) || layout(token) || colors(token) ||
-    typography(token) || border(token) || effects(token) ||
-    size(token) || display(token) || null
-  );
-}

package/src/core/04-apply.js

@@ -1,4 +0,0 @@
-// Yahan actual styling hoti hai
-export function applyStyles(el, styles) {
-    Object.assign(el.style, styles);
-}

package/src/index.js

@@ -1,5 +0,0 @@
-import { init } from "./core/01-engine.js";
-
-document.addEventListener("DOMContentLoaded", () => {
-  init();
-});

package/src/theme/theme.js

@@ -1,15 +0,0 @@
-export const theme = {
-  colors: {
-    chai: "#8b5e3c",
-    cream: "#f6e7d0",
-    masala: "#5a3d2b",
-    white: "#ffffff",
-  },
-  border: {
-    base: "#d9c3a5",
-  },
-  effects: {
-    chaiShadow: "0 12px 24px rgba(90, 61, 43, 0.22)",
-    softShadow: "0 6px 16px rgba(90, 61, 43, 0.12)",
-  },
-};

package/src/utilities/border.js

@@ -1,32 +0,0 @@
-import { theme } from "../theme/theme.js";
-
-const map = {
-  "border": { 
-    border: `1px solid ${theme.border.base}` 
-  },
-  "kinara-rekha": { 
-    border: `1px solid ${theme.border.base}` 
-  },
-  "rounded": { 
-    borderRadius: "8px" 
-  },
-  "gol-kinara": { 
-    borderRadius: "8px" 
-  },
-  "rounded-2": { 
-    borderRadius: "12px" 
-  },
-  "gol-kinara-2": { 
-    borderRadius: "12px" 
-  },
-  "rounded-full": { 
-    borderRadius: "9999px" 
-  },
-  "poora-gola": { 
-    borderRadius: "9999px" 
-  },
-};
-
-export function border(token) {
-  return map[token] || null;
-}

package/src/utilities/colors.js

@@ -1,29 +0,0 @@
-import { theme } from "../theme/theme.js";
-
-const aliases = {
-  "pichhe-chai": "bg-chai",
-  "pichhe-cream": "bg-cream",
-  "pichhe-masala": "bg-masala",
-  "likhawat-chai": "text-chai",
-  "likhawat-masala": "text-masala",
-  "likhawat-safed": "text-white",
-};
-
-export function colors(token) {
-  const normalizedToken = aliases[token] || token;
-  const bgMatch = normalizedToken.match(/^bg-(chai|cream|masala)$/);
-  if (bgMatch) {
-    return { 
-      backgroundColor: theme.colors[bgMatch[1]] 
-    };
-  }
-
-  const textMatch = normalizedToken.match(/^text-(chai|masala|white)$/);
-  if (textMatch) {
-    return { 
-      color: theme.colors[textMatch[1]] 
-    };
-  }
-
-  return null;
-}

package/src/utilities/display.js

@@ -1,10 +0,0 @@
-const map = {
-  block: { display: "block" },
-  dikhao: { display: "block" },
-  hidden: { display: "none" },
-  chhupao: { display: "none" },
-};
-
-export function display(token) {
-  return map[token] || null;
-}

package/src/utilities/effects.js

@@ -1,26 +0,0 @@
-import { theme } from "../theme/theme.js";
-
-const map = {
-  "chai-shadow": { 
-    boxShadow: theme.effects.chaiShadow 
-  },
-  "chai-parchai": { 
-    boxShadow: theme.effects.chaiShadow 
-  },
-  "soft-shadow": { 
-    boxShadow: theme.effects.softShadow 
-  },
-  "halki-parchai": { 
-    boxShadow: theme.effects.softShadow 
-  },
-  "sheesha-chai": {
-    backgroundColor: "rgba(246, 231, 208, 0.45)",
-    border: `1px solid ${theme.border.base}`,
-    backdropFilter: "blur(8px)",
-    WebkitBackdropFilter: "blur(8px)",
-  },
-};
-
-export function effects(token) {
-  return map[token] || null;
-}

package/src/utilities/layout.js

@@ -1,36 +0,0 @@
-const map = {
-  flex: { 
-    display: "flex" 
-  },
-  lacheela: { 
-    display: "flex" 
-  },
-  "flex-col": { 
-    flexDirection: "column" 
-  },
-  "lacheela-kolam": { 
-    flexDirection: "column" 
-  },
-  "items-center": { 
-    alignItems: "center" 
-  },
-  "saman-beech": { 
-    alignItems: "center" 
-  },
-  "justify-center": { 
-    justifyContent: "center" 
-  },
-  "beech-mein": { 
-    justifyContent: "center" 
-  },
-  "justify-between": { 
-    justifyContent: "space-between" 
-  },
-  "dono-kinare": { 
-    justifyContent: "space-between" 
-  },
-};
-
-export function layout(token) {
-  return map[token] || null;
-}

package/src/utilities/size.js

@@ -1,30 +0,0 @@
-const map = {
-  "w-full": { 
-    width: "100%" 
-  },
-  "chaudai-poori": { 
-    width: "100%" 
-  },
-  "h-full": { 
-    height: "100%" 
-  },
-  "unchai-poori": { 
-    height: "100%" 
-  },
-  "w-screen": { 
-    width: "100vw" 
-  },
-  "chaudai-screen": {
-    width: "100vw"
-  },
-  "h-screen": { 
-    height: "100vh" 
-  },
-  "unchai-screen": { 
-    height: "100vh" 
-  },
-};
-
-export function size(token) {
-  return map[token] || null;
-}

package/src/utilities/spacing.js

@@ -1,85 +0,0 @@
-export function spacing(token) {
-  const match = token.match(
-    /^(p|m|px|py|mx|my|gap|kinare-se|kinare-x-se|kinare-y-se|bahar-se|upar-se|niche-se|daaye-se|baaye-se|fasla)-(\d+)$/,
-  );
-
-  if (!match) {
-    return null;
-  }
-
-  const kind = match[1];
-  const value = Number(match[2]) * 4 + "px";
-
-  if (kind === "p") 
-    return { 
-      padding: value 
-    };
-  if (kind === "kinare-se") 
-    return { 
-      padding: value 
-    };
-  if (kind === "m") 
-    return { 
-      margin: value 
-    };
-  if (kind === "bahar-se") 
-    return { 
-      margin: value 
-    };
-  if (kind === "px") 
-    return { 
-        paddingLeft: value, 
-        paddingRight: value 
-    };
-  if (kind === "kinare-x-se")
-    return { 
-      paddingLeft: value, 
-      paddingRight: value 
-    };
-  if (kind === "py") 
-    return { 
-        paddingTop: value, 
-        paddingBottom: value 
-    };
-  if (kind === "kinare-y-se")
-    return { 
-      paddingTop: value, 
-      paddingBottom: value 
-    };
-  if (kind === "mx") 
-    return { 
-      marginLeft: value, 
-      marginRight: value 
-    };
-  if (kind === "baaye-se") 
-    return { 
-      marginLeft: value 
-    };
-  if (kind === "daaye-se") 
-    return { 
-        marginRight: value 
-      };
-  if (kind === "my") 
-    return { 
-      marginTop: value, 
-      marginBottom: value 
-    };
-  if (kind === "upar-se") 
-    return { 
-      marginTop: value 
-    };
-  if (kind === "niche-se") 
-    return { 
-      marginBottom: value 
-    };
-  if (kind === "gap") 
-    return { 
-      gap: value 
-    };
-  if (kind === "fasla") 
-    return { 
-      gap: value 
-    };
-
-  return null;
-}

package/src/utilities/typography.js

@@ -1,24 +0,0 @@
-const map = {
-  "text-sm": { fontSize: "14px" },
-  "akshar-chhota": { fontSize: "14px" },
-  "text-base": { fontSize: "16px" },
-  "akshar-samanya": { fontSize: "16px" },
-  "text-lg": { fontSize: "18px" },
-  "akshar-bada": { fontSize: "18px" },
-  "text-xl": { fontSize: "20px" },
-  "akshar-xl": { fontSize: "20px" },
-  "font-light": { fontWeight: "300" },
-  "font-patla": { fontWeight: "300" },
-  "font-bold": { fontWeight: "700" },
-  "font-mota": { fontWeight: "700" },
-  "text-center": { textAlign: "center" },
-  "likhawat-beech": { textAlign: "center" },
-  "text-left": { textAlign: "left" },
-  "likhawat-baaye": { textAlign: "left" },
-  "text-right": { textAlign: "right" },
-  "likhawat-daaye": { textAlign: "right" },
-};
-
-export function typography(token) {
-  return map[token] || null;
-}