@koko420/react-components 0.0.2 → 0.0.4

package/README.md

@@ -0,0 +1,11 @@
+# To setup
+@import "@koko420/react-components/styles.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+...
+
+
+or in JS
+import "@koko420/react-components/styles.css";

package/dist/styles.css

@@ -0,0 +1 @@
+.absolute{position:absolute}.relative{position:relative}.left-\[32px\]{left:32px}.left-\[56px\]{left:56px}.left-\[8px\]{left:8px}.top-0{top:0}.z-0{z-index:0}.z-\[1\]{z-index:1}.z-\[2\]{z-index:2}.-mb-\[2px\]{margin-bottom:-2px}.-ml-1{margin-left:-.25rem}.-mr-1{margin-right:-.25rem}.h-\[13px\]{height:13px}.w-\[13px\]{width:13px}.w-\[80px\]{width:80px}.scale-\[0\.65\]{--tw-scale-x:0.65;--tw-scale-y:0.65}.scale-\[0\.65\],.scale-\[0\.7\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-\[0\.7\]{--tw-scale-x:0.7;--tw-scale-y:0.7}.scale-\[0\.8\]{--tw-scale-x:0.8;--tw-scale-y:0.8}.scale-\[0\.8\],.scale-\[1\.05\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-\[1\.05\]{--tw-scale-x:1.05;--tw-scale-y:1.05}.scale-\[1\.1\]{--tw-scale-x:1.1;--tw-scale-y:1.1}.scale-\[1\.1\],.scale-\[1\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-\[1\]{--tw-scale-x:1;--tw-scale-y:1}@keyframes move-24px{0%{transform:translateX(0)}to{transform:translateX(24px)}}.animate-\[move-24px_0\.6s_infinite\]{animation:move-24px .6s infinite}@keyframes scale-in{0%{transform:scale(0)}to{transform:scale(1)}}.animate-\[scale-in_0\.6s_infinite\]{animation:scale-in .6s infinite}@keyframes scale-out{0%{transform:scale(1)}to{transform:scale(0)}}.animate-\[scale-out_0\.6s_infinite\]{animation:scale-out .6s infinite}.rounded-full{border-radius:9999px}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-neutral-550{--tw-bg-opacity:1;background-color:rgb(115 115 115/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.shadow-\[0_0_0_1px_rgba\(255\2c 255\2c 255\2c 0\.5\)\]{--tw-shadow:0 0 0 1px hsla(0,0%,100%,.5);--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koko420/react-components",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Some of my favourite components in 1 place",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -12,14 +12,14 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./tailwind-preset": "./tailwind.preset.js"
+    "./styles.css": "./dist/styles.css"
   },
   "files": [
-    "dist",
-    "tailwind.preset.js"
+    "dist"
   ],
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && pnpm build:css",
+    "build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify",
     "dev": "tsup --watch",
     "lint": "eslint src/",
     "typecheck": "tsc --noEmit"
@@ -38,6 +38,8 @@
   "devDependencies": {
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "tailwindcss": "^3.4.0",

package/tailwind.preset.js

@@ -1,27 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  theme: {
-    extend: {
-      colors: {
-        neutral: {
-          550: "#737373",
-        },
-      },
-      keyframes: {
-        "scale-in": {
-          "0%": { transform: "scale(0)" },
-          "100%": { transform: "scale(1)" },
-        },
-        "scale-out": {
-          "0%": { transform: "scale(1)" },
-          "100%": { transform: "scale(0)" },
-        },
-        "move-24px": {
-          "0%": { transform: "translateX(0)" },
-          "100%": { transform: "translateX(24px)" },
-        },
-      },
-    },
-  },
-};
-