@luminescent/ui 0.3.1 → 0.3.3

package/README.md

@@ -23,11 +23,11 @@ export default {
     extend: {
       animation: {
         // ...
-        ...tailwindConfig.animation,
+        ...tailwindConfig.theme.extend.animation,
       },
       keyframes: {
         // ...
-        ...tailwindConfig.keyframes,
+        ...tailwindConfig.theme.extend.keyframes,
       },
     },
   },

package/lib-types/tailwind.config.d.ts

@@ -0,0 +1,122 @@
+export let content: string[];
+export namespace theme {
+    namespace extend {
+        namespace animation {
+            let blob: string;
+            let blob1: string;
+            let blob2: string;
+            let blob3: string;
+            let blob4: string;
+            let blob5: string;
+            let blob6: string;
+            let float: string;
+        }
+        namespace keyframes {
+            let blob_1: {
+                '0%, 100%': {
+                    transform: string;
+                };
+                '25%': {
+                    transform: string;
+                };
+                '50%': {
+                    transform: string;
+                };
+                '75%': {
+                    transform: string;
+                };
+            };
+            export { blob_1 as blob };
+            let blob1_1: {
+                '0%, 100%': {
+                    transform: string;
+                };
+                '25%': {
+                    transform: string;
+                };
+                '50%': {
+                    transform: string;
+                };
+                '75%': {
+                    transform: string;
+                };
+            };
+            export { blob1_1 as blob1 };
+            let blob2_1: {
+                '0%, 100%': {
+                    transform: string;
+                };
+                '25%': {
+                    transform: string;
+                };
+                '50%': {
+                    transform: string;
+                };
+                '75%': {
+                    transform: string;
+                };
+            };
+            export { blob2_1 as blob2 };
+            let blob3_1: {
+                '0%, 100%': {
+                    transform: string;
+                };
+                '25%': {
+                    transform: string;
+                };
+                '50%': {
+                    transform: string;
+                };
+                '75%': {
+                    transform: string;
+                };
+            };
+            export { blob3_1 as blob3 };
+            let blob4_1: {
+                '0%, 100%': {
+                    transform: string;
+                };
+                '25%': {
+                    transform: string;
+                };
+                '50%': {
+                    transform: string;
+                };
+                '75%': {
+                    transform: string;
+                };
+            };
+            export { blob4_1 as blob4 };
+            let blob5_1: {
+                '0%, 100%': {
+                    transform: string;
+                };
+                '25%': {
+                    transform: string;
+                };
+                '50%': {
+                    transform: string;
+                };
+                '75%': {
+                    transform: string;
+                };
+            };
+            export { blob5_1 as blob5 };
+            let blob6_1: {
+                '0%, 100%': {
+                    transform: string;
+                };
+                '25%': {
+                    transform: string;
+                };
+                '50%': {
+                    transform: string;
+                };
+                '75%': {
+                    transform: string;
+                };
+            };
+            export { blob6_1 as blob6 };
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminescent/ui",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Luminescent UI library",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",
@@ -12,13 +12,13 @@
       "types": "./lib-types/index.d.ts"
     },
     "./config": {
-      "import": "./src/tailwind.config.ts"
+      "import": "./src/tailwind.config.js"
     }
   },
   "files": [
     "lib",
     "lib-types",
-    "src/tailwind.config.ts"
+    "src/tailwind.config.js"
   ],
   "engines": {
     "node": ">=15.0.0"

package/src/tailwind.config.js

@@ -0,0 +1,72 @@
+function getBlobKeyFrame() {
+  const translateXPercentages = [0, 19, 38, 57, 76];
+  const translateYPercentages = [0, 12, 25, 38, 50];
+  const scaleValues = [0.8, 1, 1.2, 1.4];
+
+  const translateX0Key = Math.floor(Math.random() * 70);
+  const translateX0 = Math.floor(Math.random() * 70);
+  translateXPercentages.splice(translateX0Key, 1);
+  const translateX1Key = Math.floor(Math.random() * translateXPercentages.length);
+  const translateX1 = translateXPercentages[translateX1Key];
+  translateXPercentages.splice(translateX1Key, 1);
+  const translateX2Key = Math.floor(Math.random() * translateXPercentages.length);
+  const translateX2 = translateXPercentages[translateX2Key];
+  translateXPercentages.splice(translateX2Key, 1);
+  const translateX3Key = Math.floor(Math.random() * translateXPercentages.length);
+  const translateX3 = translateXPercentages[translateX3Key];
+  translateXPercentages.splice(translateX3Key, 1);
+
+  const translateY0Key = Math.floor(Math.random() * translateYPercentages.length);
+  const translateY0 = translateYPercentages[translateY0Key];
+  translateYPercentages.splice(translateY0Key, 1);
+  const translateY1Key = Math.floor(Math.random() * translateYPercentages.length);
+  const translateY1 = translateYPercentages[translateY1Key];
+  translateYPercentages.splice(translateY1Key, 1);
+  const translateY2Key = Math.floor(Math.random() * translateYPercentages.length);
+  const translateY2 = translateYPercentages[translateY2Key];
+  translateYPercentages.splice(translateY2Key, 1);
+  const translateY3Key = Math.floor(Math.random() * translateYPercentages.length);
+  const translateY3 = translateYPercentages[translateY3Key];
+  translateYPercentages.splice(translateY3Key, 1);
+
+  const scale0 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
+  const scale1 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
+  const scale2 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
+  const scale3 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
+
+  const keyframe = {
+    '0%, 100%': { transform: `translate(${translateX0}cqw, ${translateY0}cqh) scale(${scale0})` },
+    '25%': { transform: `translate(${translateX1}cqw, ${translateY1}cqh) scale(${scale1})` },
+    '50%': { transform: `translate(${translateX2}cqw, ${translateY2}cqh) scale(${scale2})` },
+    '75%': { transform: `translate(${translateX3}cqw, ${translateY3}cqh) scale(${scale3})` },
+  };
+
+  return keyframe;
+}
+
+module.exports = {
+  content: ['./node_modules/@luminescent/ui/**/*.{mjs,cjs}'],
+  theme: {
+    extend: {
+      animation: {
+        blob: 'blob 15s infinite',
+        blob1: 'blob1 15s infinite',
+        blob2: 'blob2 15s infinite',
+        blob3: 'blob3 15s infinite',
+        blob4: 'blob4 15s infinite',
+        blob5: 'blob5 15s infinite',
+        blob6: 'blob6 15s infinite',
+        float: 'float 6s infinite',
+      },
+      keyframes: {
+        blob: getBlobKeyFrame(),
+        blob1: getBlobKeyFrame(),
+        blob2: getBlobKeyFrame(),
+        blob3: getBlobKeyFrame(),
+        blob4: getBlobKeyFrame(),
+        blob5: getBlobKeyFrame(),
+        blob6: getBlobKeyFrame(),
+      },    
+    }
+  }
+};