{"_id":"@agam_arora/chaicore","name":"@agam_arora/chaicore","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@agam_arora/chaicore","version":"1.0.0","description":"A zero-build runtime utility-first CSS engine","main":"cssEngine.js","scripts":{"test":"echo \"No tests yet\""},"keywords":["css","chaicore","utility-first","runtime-css","frontend"],"author":{"name":"Agam Arora"},"license":"MIT","type":"commonjs","_id":"@agam_arora/chaicore@1.0.0","_nodeVersion":"24.13.1","_npmVersion":"11.8.0","dist":{"integrity":"sha512-XssdJLS+B8SwzuGKPxHPRtjLrt0t7hAGbpafpCnT7K5ns4Mp6imNNDta/li0+h11nuXgFs9gSppXS/tGstWxww==","shasum":"0b739e07df8411c5b16eebd32b87c22ac787e4e5","tarball":"https://registry.npmjs.org/@agam_arora/chaicore/-/chaicore-1.0.0.tgz","fileCount":3,"unpackedSize":20535,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGPHdjFPtmR0c6m6AWIzmLmYLihZYvmiZUQGxfkxyMV3AiEA8t/F8VBR/Jpees0ucCXEhQJYaCXtLQB7uh+C4NrYJ3I="}]},"_npmUser":{"name":"agam_arora","email":"agamxpro69@gmail.com"},"directories":{},"maintainers":[{"name":"agam_arora","email":"agamxpro69@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/chaicore_1.0.0_1774405977505_0.6377979418173443"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-25T02:32:57.400Z","1.0.0":"2026-03-25T02:32:57.662Z","modified":"2026-03-25T02:32:57.909Z"},"maintainers":[{"name":"agam_arora","email":"agamxpro69@gmail.com"}],"description":"A zero-build runtime utility-first CSS engine","keywords":["css","chaicore","utility-first","runtime-css","frontend"],"author":{"name":"Agam Arora"},"license":"MIT","readme":"# 🍃 ChaiCore\n\n**ChaiCore** is a blazing-fast, zero-build, dependency-free **Runtime CSS-in-JS Utility Engine**.\n\nDesigned to bring the convenience of utility-first CSS frameworks straight to the browser, ChaiCore parses classes on the fly and intelligently injects inline styles dynamically without the need for Webpack, Node.js, or any complex build processes.\n\n---\n\n## 🛠️ How It Works\n\nChaiCore runs natively in the browser on `DOMContentLoaded`.\n\n1. It scans the document for any element containing classes prefixed with `chai-`.\n2. It parses the utility segments logically (e.g., `chai-bg-#ff0000` splits into the utility `bg` and value `#ff0000`).\n3. It maps the utility dynamically to its valid CSS-in-JS equivalent through the internal `this.rules` dictionary.\n4. It safely assigns the resolved styles directly to the elements via `Object.assign(el.style, styleObj)` and removes the raw class string from the element to keep the DOM completely clean.\n\n---\n\n## 📖 Exhaustive Utility Class Documentation\n\nBelow is the complete list of all supported utility classes and exactly what CSS rules they generate.\n\n> **Important**: All utilities must be prefixed with `chai-`. Numbers are automatically converted to `px` unless otherwise specified (or if you pass a string like `100%`).\n\n### 1. Typography & Text\n\n| Class                 | CSS Generated             | Example                                       |\n| :-------------------- | :------------------------ | :-------------------------------------------- |\n| `chai-text-[color]`   | `color: [color]`          | `chai-text-#ff0000`, `chai-text-white`        |\n| `chai-text-[size]`    | `font-size: [px]`         | `chai-text-sm` (14px), `chai-text-2xl` (24px) |\n| `chai-text-[align]`   | `text-align: [align]`     | `chai-text-center`, `chai-text-right`         |\n| `chai-font-[family]`  | `font-family: [family]`   | `chai-font-sans`                              |\n| `chai-bold`           | `font-weight: bold`       | `chai-bold`                                   |\n| `chai-semibold`       | `font-weight: 600`        | `chai-semibold`                               |\n| `chai-light`          | `font-weight: 300`        | `chai-light`                                  |\n| `chai-italic`         | `font-style: italic`      | `chai-italic`                                 |\n| `chai-tracking-[val]` | `letter-spacing: [val]px` | `chai-tracking-2`                             |\n| `chai-leading-[val]`  | `line-height: [val]`      | `chai-leading-1.5`                            |\n\n_(Available text sizes: `xs` (12px), `sm` (14px), `base` (16px), `lg` (18px), `xl` (20px), `2xl` (24px), `3xl` (30px), `4xl` (36px), `5xl` (48px), `6xl` (64px), `7xl` (80px))_  \n_(Available text aligns: `left`, `center`, `right`, `justify`)_\n\n### 2. Colors & Backgrounds\n\n| Class                | CSS Generated               | Example                                  |\n| :------------------- | :-------------------------- | :--------------------------------------- |\n| `chai-bg-[color]`    | `background-color: [color]` | `chai-bg-#0f172a`, `chai-bg-transparent` |\n| `chai-opacity-[val]` | `opacity: [val/100]`        | `chai-opacity-50` (translates to `0.5`)  |\n\n### 3. Spacing (Margin & Padding)\n\n| Class           | Target Property | Supported Sides / Description | Example                        |\n| :-------------- | :-------------- | :---------------------------- | :----------------------------- |\n| `chai-p-[val]`  | Padding         | All sides                     | `chai-p-20`                    |\n| `chai-px-[val]` | Padding         | Left and Right                | `chai-px-40`                   |\n| `chai-py-[val]` | Padding         | Top and Bottom                | `chai-py-10`                   |\n| `chai-pt-[val]` | Padding         | Top                           | `chai-pt-5`                    |\n| `chai-pr-[val]` | Padding         | Right                         | `chai-pr-5`                    |\n| `chai-pb-[val]` | Padding         | Bottom                        | `chai-pb-5`                    |\n| `chai-pl-[val]` | Padding         | Left                          | `chai-pl-5`                    |\n| `chai-m-[val]`  | Margin          | All sides                     | `chai-m-10`                    |\n| `chai-mx-[val]` | Margin          | Left and Right                | `chai-mx-auto` (Centers block) |\n| `chai-my-[val]` | Margin          | Top and Bottom                | `chai-my-20`                   |\n| `chai-mt-[val]` | Margin          | Top                           | `chai-mt-auto`                 |\n| `chai-mr-[val]` | Margin          | Right                         | `chai-mr-10`                   |\n| `chai-mb-[val]` | Margin          | Bottom                        | `chai-mb-10`                   |\n| `chai-ml-[val]` | Margin          | Left                          | `chai-ml-10`                   |\n\n### 4. Sizing\n\n| Class              | Description       | Example / Note                                                      |\n| :----------------- | :---------------- | :------------------------------------------------------------------ |\n| `chai-w-[val]`     | Sets `width`      | `chai-w-full` (100%), `chai-w-screen` (100vw), `chai-w-200` (200px) |\n| `chai-h-[val]`     | Sets `height`     | `chai-h-full` (100%), `chai-h-screen` (100vh), `chai-h-100` (100px) |\n| `chai-max-w-[val]` | Sets `max-width`  | `chai-max-w-screen` (100vw), `chai-max-w-800` (800px)               |\n| `chai-min-h-[val]` | Sets `min-height` | `chai-min-h-screen` (100vh), `chai-min-h-full` (100%)               |\n\n### 5. Layout & Display\n\n| Class                 | CSS Generated                              |\n| :-------------------- | :----------------------------------------- |\n| `chai-flex`           | `display: flex`                            |\n| `chai-grid`           | `display: grid`                            |\n| `chai-block`          | `display: block`                           |\n| `chai-inline-block`   | `display: inline-block`                    |\n| `chai-hidden`         | `display: none`                            |\n| `chai-absolute`       | `position: absolute`                       |\n| `chai-relative`       | `position: relative`                       |\n| `chai-fixed`          | `position: fixed`                          |\n| `chai-sticky`         | `position: sticky`                         |\n| `chai-top-[val]`      | `top: [val]px`                             |\n| `chai-bottom-[val]`   | `bottom: [val]px`                          |\n| `chai-right-[val]`    | `right: [val]px`                           |\n| `chai-left-[val]`     | `left: [val]px`                            |\n| `chai-inset-[val]`    | `inset: [val]px`                           |\n| `chai-z-[val]`        | `z-index: [val]`                           |\n| `chai-overflow-[val]` | `overflow: [val]` (`auto`, `hidden`, etc.) |\n\n### 6. Flexbox & Grid Controls\n\n| Class                  | CSS Generated                                          | Example                      |\n| :--------------------- | :----------------------------------------------------- | :--------------------------- |\n| `chai-flex-col`        | `flex-direction: column`                               | `chai-flex-col`              |\n| `chai-flex-row`        | `flex-direction: row`                                  | `chai-flex-row`              |\n| `chai-flex-wrap`       | `flex-wrap: wrap`                                      | `chai-flex-wrap`             |\n| `chai-items-[val]`     | `align-items: [val]`                                   | `chai-items-center`          |\n| `chai-justify-[val]`   | `justify-content: [val]`                               | `chai-justify-space-between` |\n| `chai-gap-[val]`       | `gap: [val]px`                                         | `chai-gap-20`                |\n| `chai-grid-cols-[val]` | `grid-template-columns: repeat([val], minmax(0, 1fr))` | `chai-grid-cols-3`           |\n\n### 7. Borders & Radius\n\n| Class                   | CSS Generated                                                                       | Example                                  |\n| :---------------------- | :---------------------------------------------------------------------------------- | :--------------------------------------- |\n| `chai-border`           | `border: 1px solid currentColor`                                                    | `chai-border`                            |\n| `chai-border-[val]`     | If style (`solid`/`dashed`): sets `border-style: [val]`, else `border-color: [val]` | `chai-border-dashed`, `chai-border-#333` |\n| `chai-border-t-[color]` | `border-top: 1px solid [color]`                                                     | `chai-border-t-#fff`                     |\n| `chai-border-b-[color]` | `border-bottom: 1px solid [color]`                                                  | `chai-border-b-rgba(0,0,0,0.1)`          |\n| `chai-rounded-[val]`    | `border-radius: [val]px` (Default is 4px. `full` is 9999px)                         | `chai-rounded-12`, `chai-rounded-full`   |\n\n### 8. Premium Effects & Misc\n\n| Class                      | CSS Generated                  | Note                                                     |\n| :------------------------- | :----------------------------- | :------------------------------------------------------- |\n| `chai-shadow`              | Standard subtle box shadow     | `box-shadow: 0 4px ...`                                  |\n| `chai-shadow-lg`           | Large prominent box shadow     | `box-shadow: 0 10px ...`                                 |\n| `chai-pointer`             | `cursor: pointer`              | Hover pointer on elements                                |\n| `chai-backdrop-blur-[val]` | `backdrop-filter: blur([val])` | Sizes: `sm` (4px), `md` (12px), `lg` (24px), `xl` (40px) |\n| `chai-filter-blur-[val]`   | `filter: blur([val]px)`        | `chai-filter-blur-10`                                    |\n| `chai-glass`               | Complete glassmorphism styling | Adds rgba background, blur, and subtle border            |\n| `chai-glass-card`          | Intensified glass card UI      | Deep blur, low opacity background, 32px shadow           |\n| `chai-text-gradient`       | Vibrant text gradient          | Applies linear-gradient to text clip                     |\n\n---\n\n## 🎨 Extending the Engine\n\nThe true architectural power of **ChaiCore** is how modular and painless it is to inject custom CSS logic directly in JavaScript.\n\nOpen `cssEngine.js` and add a new utility resolver key in `this.rules`:\n\n```js\nthis.rules = {\n  // ... existing rules\n\n  // Custom Transform Utility\n  rotate: (value) => ({ transform: `rotate(${value}deg)` }),\n\n  // Custom Predefined Token\n  \"theme-button\": () => ({\n    backgroundColor: \"#10b981\",\n    border: \"1px solid rgba(255,255,255,0.1)\",\n    borderRadius: \"16px\",\n    padding: \"12px 24px\",\n    cursor: \"pointer\",\n    transition: \"transform 0.3s ease\",\n  }),\n};\n```\n","readmeFilename":"README.md","_rev":"1-0cbc902e69c03451a6a10056ec0b724e"}