teawind-engine 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +12 -1
  2. package/package.json +1 -1
  3. package/src/index.js +0 -161
  4. package/demo.html +0 -395
package/README.md CHANGED
@@ -18,6 +18,9 @@ A lightweight utility-first CSS engine. Build UIs using `chai-*` classes without
18
18
  ## 📦 Installation
19
19
 
20
20
  ### NPM
21
+ ```plaintext
22
+ https://www.npmjs.com/package/teawind-engine
23
+ ```
21
24
 
22
25
  ```bash
23
26
  npm install teawind-engine
@@ -27,7 +30,7 @@ npm install teawind-engine
27
30
 
28
31
  ```plaintext
29
32
  <script type="module">
30
- import { initTeawind } from 'https://cdn.jsdelivr.net/npm/teawind-engine@1.0.0/src/index.js';
33
+ import { initTeawind } from 'https://cdn.jsdelivr.net/npm/teawind-engine@1.0.2/src/index.js';
31
34
  initTeawind();
32
35
  </script>
33
36
  ```
@@ -37,6 +40,14 @@ npm install teawind-engine
37
40
  ```plaintext
38
41
  git clone https://github.com/ravi8555/teawind-engine.git
39
42
  ```
43
+ ### **Demo**
44
+
45
+ ```plaintext
46
+ git clone https://github.com/ravi8555/teawind-engine.git
47
+ ```
48
+ ### **Demo**
49
+
50
+ https://teawind-engine-wesite.vercel.app/
40
51
 
41
52
  ### **🚀 Usage**
42
53
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "teawind-engine",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "description": "Lightweight utility-first CSS engine",
5
5
  "main": "src/index.js",
6
6
  "type": "module",
package/src/index.js CHANGED
@@ -1,164 +1,3 @@
1
- // // Main entry point for teawind package
2
- // import { parseDynamicClass, styleMap } from './core/parser.js';
3
- // import { observeAndApplyStyles } from './core/observer.js';
4
-
5
- // // Store original styles for hover effects
6
- // let hoverStyles = new Map();
7
-
8
- // // Apply styles to a single element
9
- // export function applyStyles(element) {
10
- // if (!element || !element.className) return;
11
-
12
- // const classNames = element.className.split(/\s+/);
13
- // const styleToApply = {};
14
- // const remainingClasses = [];
15
-
16
- // classNames.forEach((className) => {
17
- // if (className.startsWith("chai-")) {
18
- // const cleanClass = className.replace("chai-", "");
19
- // const style = styleMap[cleanClass];
20
-
21
- // if (style) {
22
- // Object.assign(styleToApply, style);
23
- // }
24
-
25
- // parseDynamicClass(cleanClass, styleToApply);
26
- // } else {
27
- // remainingClasses.push(className);
28
- // }
29
- // });
30
-
31
- // Object.assign(element.style, styleToApply);
32
- // element.className = remainingClasses.join(" ");
33
-
34
- // // Apply hover effects
35
- // applyHoverEffects(element);
36
- // }
37
-
38
- // // Apply hover effects
39
- // function applyHoverEffects(element) {
40
- // const classNames = element.className.split(/\s+/);
41
-
42
- // classNames.forEach(className => {
43
- // if (className === "chai-hover-scale") {
44
- // element.addEventListener("mouseenter", () => {
45
- // element.style.transform = "scale(1.05)";
46
- // element.style.transition = "transform 0.2s";
47
- // });
48
- // element.addEventListener("mouseleave", () => {
49
- // element.style.transform = "scale(1)";
50
- // });
51
- // }
52
-
53
- // if (className === "chai-hover-bg-red") {
54
- // const originalBg = element.style.backgroundColor;
55
- // element.addEventListener("mouseenter", () => {
56
- // element.style.backgroundColor = "#ef4444";
57
- // });
58
- // element.addEventListener("mouseleave", () => {
59
- // element.style.backgroundColor = originalBg || "";
60
- // });
61
- // }
62
-
63
- // if (className === "chai-hover-text-white") {
64
- // const originalColor = element.style.color;
65
- // element.addEventListener("mouseenter", () => {
66
- // element.style.color = "#ffffff";
67
- // });
68
- // element.addEventListener("mouseleave", () => {
69
- // element.style.color = originalColor || "";
70
- // });
71
- // }
72
-
73
- // if (className === "chai-hover-shadow") {
74
- // element.addEventListener("mouseenter", () => {
75
- // element.style.boxShadow = "0 10px 25px rgba(0,0,0,0.15)";
76
- // });
77
- // element.addEventListener("mouseleave", () => {
78
- // element.style.boxShadow = "";
79
- // });
80
- // }
81
-
82
- // if (className === "chai-hover-border") {
83
- // element.addEventListener("mouseenter", () => {
84
- // element.style.borderColor = "#ef4444";
85
- // element.style.borderWidth = "2px";
86
- // });
87
- // element.addEventListener("mouseleave", () => {
88
- // element.style.borderColor = "";
89
- // element.style.borderWidth = "";
90
- // });
91
- // }
92
- // });
93
- // }
94
-
95
- // // Initialize Teawind
96
- // export function initTeawind(container = document.body) {
97
- // // Apply to all existing elements
98
- // document.querySelectorAll('[class]').forEach(ele => {
99
- // applyStyles(ele);
100
- // });
101
-
102
- // // Watch for new elements
103
- // const observer = new MutationObserver(mutations => {
104
- // mutations.forEach(mutation => {
105
- // mutation.addedNodes.forEach(node => {
106
- // if (node.nodeType === 1 && node.hasAttribute && node.hasAttribute('class')) {
107
- // applyStyles(node);
108
- // }
109
- // });
110
- // });
111
- // });
112
-
113
- // observer.observe(container, { childList: true, subtree: true });
114
-
115
- // console.log('🍵 Teawind CSS Engine initialized!');
116
- // }
117
-
118
- // // Default export
119
- // export default {
120
- // init: initTeawind,
121
- // applyStyles,
122
- // version: '1.0.0'
123
- // };
124
-
125
-
126
- /**
127
- * Teawind CSS Engine - Main Entry Point
128
- */
129
-
130
- // import { styleMap, parseDynamicClass } from './core/parser.js';
131
- // import { injectStyles, keyframes } from './core/styles.js';
132
- // import { initObserver } from './core/observer.js';
133
-
134
- // // Inject base styles when the engine loads
135
- // if (typeof document !== 'undefined') {
136
- // injectStyles();
137
- // }
138
-
139
- // // Export everything
140
- // export { styleMap, parseDynamicClass };
141
- // export { initObserver };
142
- // export { injectStyles, keyframes };
143
-
144
- // // Main initialization function
145
- // export function initTeawind(container = document.body, options = {}) {
146
- // return initObserver(container, options);
147
- // }
148
-
149
- // // Default export
150
- // export default {
151
- // init: initTeawind,
152
- // injectStyles,
153
- // keyframes,
154
- // version: '1.0.0'
155
- // };
156
-
157
-
158
-
159
-
160
-
161
-
162
1
  // src/index.js
163
2
  import { styleMap, parseDynamicClass } from './core/parser.js';
164
3
  import { injectStyles, keyframes } from './core/styles.js';
package/demo.html DELETED
@@ -1,395 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Teawind CSS - Visual Demo</title>
7
- <style>
8
- * {
9
- margin: 0;
10
- padding: 0;
11
- box-sizing: border-box;
12
- }
13
-
14
- body {
15
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
16
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17
- padding: 40px 20px;
18
- }
19
-
20
- .container {
21
- max-width: 1400px;
22
- margin: 0 auto;
23
- }
24
-
25
- /* Header */
26
- .header {
27
- background: white;
28
- border-radius: 24px;
29
- padding: 40px;
30
- margin-bottom: 40px;
31
- text-align: center;
32
- box-shadow: 0 20px 40px rgba(0,0,0,0.1);
33
- }
34
-
35
- .header h1 {
36
- font-size: 3rem;
37
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
38
- -webkit-background-clip: text;
39
- -webkit-text-fill-color: transparent;
40
- margin-bottom: 10px;
41
- }
42
-
43
- .header p {
44
- color: #666;
45
- font-size: 1.2rem;
46
- }
47
-
48
- .badge {
49
- display: inline-block;
50
- background: #10b981;
51
- color: white;
52
- padding: 5px 15px;
53
- border-radius: 20px;
54
- font-size: 0.9rem;
55
- margin-top: 15px;
56
- }
57
-
58
- /* Grid Layout */
59
- .grid {
60
- display: grid;
61
- grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
62
- gap: 25px;
63
- margin-bottom: 40px;
64
- }
65
-
66
- /* Cards */
67
- .card {
68
- background: white;
69
- border-radius: 20px;
70
- padding: 25px;
71
- box-shadow: 0 10px 30px rgba(0,0,0,0.1);
72
- transition: transform 0.3s, box-shadow 0.3s;
73
- }
74
-
75
- .card:hover {
76
- transform: translateY(-5px);
77
- box-shadow: 0 20px 40px rgba(0,0,0,0.15);
78
- }
79
-
80
- .card h2 {
81
- font-size: 1.5rem;
82
- margin-bottom: 20px;
83
- color: #333;
84
- border-left: 4px solid #667eea;
85
- padding-left: 15px;
86
- }
87
-
88
- .demo-section {
89
- margin: 15px 0;
90
- }
91
-
92
- .demo-box {
93
- background: #f8f9fa;
94
- border-radius: 12px;
95
- padding: 15px;
96
- margin: 10px 0;
97
- text-align: center;
98
- }
99
-
100
- code {
101
- background: #f0f0f0;
102
- padding: 4px 8px;
103
- border-radius: 6px;
104
- font-family: 'Courier New', monospace;
105
- font-size: 0.85rem;
106
- color: #d63384;
107
- display: inline-block;
108
- margin: 5px;
109
- }
110
-
111
- .flex-demo {
112
- display: flex;
113
- gap: 10px;
114
- margin: 10px 0;
115
- }
116
-
117
- .color-swatch {
118
- width: 80px;
119
- height: 80px;
120
- border-radius: 12px;
121
- display: inline-flex;
122
- align-items: center;
123
- justify-content: center;
124
- margin: 5px;
125
- font-size: 12px;
126
- font-weight: bold;
127
- }
128
-
129
- button {
130
- background: #667eea;
131
- color: white;
132
- border: none;
133
- padding: 10px 20px;
134
- border-radius: 8px;
135
- cursor: pointer;
136
- font-size: 14px;
137
- transition: all 0.3s;
138
- }
139
-
140
- button:hover {
141
- background: #764ba2;
142
- }
143
-
144
- .live-tester {
145
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
146
- border-radius: 24px;
147
- padding: 30px;
148
- margin-top: 40px;
149
- }
150
-
151
- .live-tester-inner {
152
- background: white;
153
- border-radius: 20px;
154
- padding: 30px;
155
- }
156
-
157
- .live-tester input {
158
- width: 100%;
159
- padding: 12px 16px;
160
- border: 2px solid #e0e0e0;
161
- border-radius: 10px;
162
- font-family: 'Courier New', monospace;
163
- font-size: 14px;
164
- margin-bottom: 20px;
165
- }
166
-
167
- .preview-area {
168
- background: #f8f9fa;
169
- border-radius: 12px;
170
- padding: 40px;
171
- text-align: center;
172
- min-height: 150px;
173
- transition: all 0.3s;
174
- }
175
-
176
- .example-buttons {
177
- display: flex;
178
- flex-wrap: wrap;
179
- gap: 10px;
180
- margin-top: 20px;
181
- }
182
-
183
- .example-btn {
184
- background: #e9ecef;
185
- color: #495057;
186
- padding: 8px 12px;
187
- font-size: 12px;
188
- }
189
-
190
- .example-btn:hover {
191
- background: #667eea;
192
- color: white;
193
- }
194
-
195
- footer {
196
- text-align: center;
197
- color: white;
198
- margin-top: 40px;
199
- padding: 20px;
200
- }
201
-
202
- footer a {
203
- color: white;
204
- text-decoration: none;
205
- }
206
- </style>
207
- </head>
208
- <body>
209
- <div class="container">
210
- <!-- Header -->
211
- <div class="header">
212
- <h1>🍵 Teawind CSS</h1>
213
- <p>Lightweight utility-first CSS engine - Visual Demo</p>
214
- <div class="badge">✨ All chai-* classes in action</div>
215
- </div>
216
-
217
- <div class="grid">
218
- <!-- Colors Card -->
219
- <div class="card">
220
- <h2>🎨 Colors</h2>
221
- <div class="demo-section">
222
- <div class="chai-bg-red color-swatch">Red</div>
223
- <div class="chai-bg-blue color-swatch">Blue</div>
224
- <div class="chai-bg-green color-swatch">Green</div>
225
- <div class="chai-bg-yellow color-swatch" style="color:black;">Yellow</div>
226
- <div class="chai-bg-gray color-swatch">Gray</div>
227
- <div class="chai-bg-black color-swatch">Black</div>
228
- </div>
229
- <div class="demo-section">
230
- <p class="chai-text-red">chai-text-red - Red text</p>
231
- <p class="chai-text-blue">chai-text-blue - Blue text</p>
232
- <p class="chai-text-green">chai-text-green - Green text</p>
233
- </div>
234
- <code>chai-bg-red</code>
235
- <code>chai-text-white</code>
236
- <code>chai-text-blue</code>
237
- </div>
238
-
239
- <!-- Spacing Card -->
240
- <div class="card">
241
- <h2>📏 Spacing (1 unit = 4px)</h2>
242
- <div class="demo-box chai-bg-red chai-text-white chai-p-10">chai-p-10 (40px padding)</div>
243
- <div class="demo-box chai-bg-blue chai-text-white chai-p-20">chai-p-20 (80px padding)</div>
244
- <div class="demo-box chai-bg-green chai-text-white chai-m-10">chai-m-10 (40px margin)</div>
245
- <div class="demo-box chai-bg-gray chai-text-white chai-px-20 chai-py-10">chai-px-20 chai-py-10</div>
246
- <code>chai-p-10</code>
247
- <code>chai-m-20</code>
248
- <code>chai-px-30</code>
249
- </div>
250
-
251
- <!-- Typography Card -->
252
- <div class="card">
253
- <h2>✍️ Typography</h2>
254
- <div class="demo-box chai-text-16">chai-text-16 (16px font)</div>
255
- <div class="demo-box chai-text-24 chai-font-bold">chai-text-24 + bold</div>
256
- <div class="demo-box chai-text-center">chai-text-center alignment</div>
257
- <div class="demo-box chai-text-left">chai-text-left</div>
258
- <div class="demo-box chai-text-right">chai-text-right</div>
259
- <code>chai-text-16</code>
260
- <code>chai-text-24</code>
261
- <code>chai-font-bold</code>
262
- </div>
263
-
264
- <!-- Layout & Flex Card -->
265
- <div class="card">
266
- <h2>🔲 Layout & Flex</h2>
267
- <div class="chai-flex chai-gap-10">
268
- <div class="chai-bg-red chai-text-white chai-p-10 chai-rounded-5">Flex 1</div>
269
- <div class="chai-bg-blue chai-text-white chai-p-10 chai-rounded-5">Flex 2</div>
270
- <div class="chai-bg-green chai-text-white chai-p-10 chai-rounded-5">Flex 3</div>
271
- </div>
272
- <div class="chai-flex chai-justify-between chai-mt-10 chai-mb-10">
273
- <span>← Left</span>
274
- <span>Center</span>
275
- <span>Right →</span>
276
- </div>
277
- <div class="chai-flex chai-flex-col chai-gap-5">
278
- <div class="chai-bg-gray chai-text-white chai-p-5 chai-rounded-5">Column 1</div>
279
- <div class="chai-bg-gray chai-text-white chai-p-5 chai-rounded-5">Column 2</div>
280
- </div>
281
- <code>chai-flex</code>
282
- <code>chai-justify-between</code>
283
- <code>chai-flex-col</code>
284
- </div>
285
-
286
- <!-- Borders Card -->
287
- <div class="card">
288
- <h2>🖌️ Borders & Radius</h2>
289
- <div class="demo-box chai-border-2 chai-rounded-10">border-2 + rounded-10</div>
290
- <div class="demo-box chai-border-4 chai-rounded-20 chai-mt-10">border-4 + rounded-20</div>
291
- <div class="demo-box chai-border-red chai-border-2 chai-mt-10">border-red + border-2</div>
292
- <code>chai-border-2</code>
293
- <code>chai-rounded-20</code>
294
- <code>chai-border-red</code>
295
- </div>
296
-
297
- <!-- Transforms Card -->
298
- <div class="card">
299
- <h2>🌀 Transforms</h2>
300
- <div class="flex-demo">
301
- <div class="chai-scale-2 chai-bg-red chai-text-white chai-p-10 chai-rounded-5">scale-2</div>
302
- <div class="chai-scale-3 chai-bg-blue chai-text-white chai-p-10 chai-rounded-5">scale-3</div>
303
- </div>
304
- <div class="flex-demo">
305
- <div class="chai-rotate-45 chai-bg-green chai-text-white chai-p-10 chai-rounded-5">rotate-45°</div>
306
- <div class="chai-rotate-90 chai-bg-yellow chai-p-10 chai-rounded-5">rotate-90°</div>
307
- </div>
308
- <code>chai-scale-2</code>
309
- <code>chai-rotate-45</code>
310
- <code>chai-scale-1</code>
311
- </div>
312
-
313
- <!-- Hover Effects Card -->
314
- <div class="card">
315
- <h2>✨ Hover Effects</h2>
316
- <div class="flex-demo">
317
- <button class="chai-hover-scale">Hover Scale ↑</button>
318
- <button class="chai-hover-bg-red">Hover Red BG</button>
319
- </div>
320
- <div class="flex-demo">
321
- <button class="chai-hover-text-white chai-bg-black">Hover White Text</button>
322
- <div class="chai-hover-shadow chai-bg-gray chai-p-10 chai-rounded-5">Hover Shadow</div>
323
- </div>
324
- <div class="chai-hover-border chai-border-2 chai-p-10 chai-text-center chai-rounded-5">Hover Border</div>
325
- <code>chai-hover-scale</code>
326
- <code>chai-hover-shadow</code>
327
- <code>chai-hover-border</code>
328
- </div>
329
-
330
- <!-- Width & Height Card -->
331
- <div class="card">
332
- <h2>📐 Width & Height</h2>
333
- <div class="chai-w-full chai-bg-blue chai-text-white chai-p-10 chai-text-center chai-rounded-5">w-full (100%)</div>
334
- <div class="chai-w-50 chai-bg-green chai-text-white chai-p-10 chai-text-center chai-rounded-5 chai-mt-5">w-50 (200px)</div>
335
- <div class="chai-h-20 chai-bg-red chai-text-white chai-p-10 chai-text-center chai-rounded-5 chai-mt-5">h-20 (80px)</div>
336
- <code>chai-w-full</code>
337
- <code>chai-w-50</code>
338
- <code>chai-h-20</code>
339
- </div>
340
- </div>
341
-
342
- <!-- Live Tester -->
343
- <div class="live-tester">
344
- <div class="live-tester-inner">
345
- <h2 style="margin-bottom: 20px;">🎯 Live Class Tester</h2>
346
- <input type="text" id="classInput" placeholder="Enter chai-* classes (e.g., chai-bg-red chai-text-white chai-p-20 chai-rounded-10)">
347
- <div id="preview" class="preview-area">
348
- <strong>✨ Preview Element</strong><br>
349
- Try different classes above!
350
- </div>
351
- <div class="example-buttons">
352
- <button class="example-btn" onclick="setClass('chai-bg-red chai-text-white chai-p-20 chai-rounded-10')">Red Card</button>
353
- <button class="example-btn" onclick="setClass('chai-bg-blue chai-text-white chai-p-20 chai-rounded-20')">Blue Card</button>
354
- <button class="example-btn" onclick="setClass('chai-bg-green chai-text-white chai-p-30 chai-rounded-10 chai-scale-2')">Green Scale</button>
355
- <button class="example-btn" onclick="setClass('chai-border-4 chai-border-red chai-rounded-20 chai-p-20')">Border Demo</button>
356
- <button class="example-btn" onclick="setClass('chai-text-24 chai-font-bold chai-text-center chai-bg-yellow chai-p-20')">Typography</button>
357
- </div>
358
- </div>
359
- </div>
360
-
361
- <footer>
362
- <p>🍵 Teawind CSS Engine | All <code style="color:white; background:rgba(255,255,255,0.2);">chai-*</code> classes are processed dynamically</p>
363
- <p style="margin-top: 10px;">
364
- <a href="https://www.npmjs.com/package/teawind-engine" target="_blank">📦 npm</a> |
365
- <a href="https://github.com/ravi8555/teawind-engine" target="_blank">🐙 GitHub</a>
366
- </p>
367
- </footer>
368
- </div>
369
-
370
- <script type="module">
371
- import { initTeawind, applyStyles } from './src/index.js';
372
- console.log("initTeawind");
373
-
374
- // Initialize Teawind
375
- initTeawind();
376
-
377
- // Live tester
378
- const classInput = document.getElementById('classInput');
379
- const preview = document.getElementById('preview');
380
-
381
- window.setClass = (classes) => {
382
- classInput.value = classes;
383
- preview.className = classes;
384
- applyStyles(preview);
385
- };
386
-
387
- classInput.addEventListener('input', () => {
388
- preview.className = classInput.value;
389
- applyStyles(preview);
390
- });
391
-
392
- console.log('🍵 Teawind Visual Demo Loaded!');
393
- </script>
394
- </body>
395
- </html>