@adriansteffan/reactive 0.0.11 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adriansteffan/reactive",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -23,7 +23,7 @@
       "types": "./dist/mod.d.ts"
     },
     "./style.css": "./dist/style.css",
-    "./tailwind.config.js": "./dist/tailwind.config.js"
+    "./preset.css": "./dist/preset.css"
   },
   "author": "Adrian Steffan",
   "license": "MIT",
@@ -42,11 +42,12 @@
     "uuid": "^11.0.3"
   },
   "peerDependencies": {
-    "tailwindcss": "^3.4.3"
+    "tailwindcss": "^4.0.9"
   },
   "devDependencies": {
     "@eslint/config-array": "^0.19.0",
     "@eslint/object-schema": "^2.1.4",
+    "@tailwindcss/postcss": "^4.0.9",
     "@types/howler": "^2.2.11",
     "@types/node": "^22.9.2",
     "@types/react": "^18.2.66",
@@ -55,7 +56,7 @@
     "@typescript-eslint/eslint-plugin": "^8.16.0",
     "@typescript-eslint/parser": "^8.16.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.20",
     "concurrently": "^9.1.0",
     "eslint": "^9.0.0",
     "eslint-plugin-react-hooks": "^5.0.0",
@@ -65,7 +66,7 @@
     "postcss": "^8.4.38",
     "prettier": "3.2.5",
     "rimraf": "^5.0.5",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^4.0.9",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-plugin-dts": "^4.3.0",

package/postcss.config.js

@@ -1,6 +1,6 @@
 export default {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     autoprefixer: {},
   },
 }

package/src/components/text.tsx

@@ -19,20 +19,20 @@ function Text({
   return (
     <div className={`max-w-prose mx-auto ${className} mt-20 mb-20`}>
       <article
-        className={`prose prose-2xl prose-slate text-xl prose-a:text-blue-600 prose-a:underline prose-h1:text-5xl prose-h1:mb-10 prose-h1:font-bold prose-p:mb-4 prose-strong:font-bold text-black leading-relaxed
-            ${animate ? 'animate-slideDown opacity-0' : ''}`}
+        className={`prose prose-2xl prose-slate text-xl prose-a:text-blue-600 prose-a:underline prose-h1:text-4xl prose-h1:mb-10 prose-h1:font-bold prose-p:mb-4 prose-strong:font-bold text-black leading-relaxed
+            ${animate ? 'animate-slide-down opacity-0' : ''}`}
       >
         {content}
       </article>
 
       {buttonText && (
         <div
-          className={`mt-16 flex justify-center ${animate ? 'animate-fadeIn opacity-0' : ''}`}
+          className={`mt-16 flex justify-center ${animate ? 'animate-fade-in opacity-0' : ''}`}
           style={animate ? { animationDelay: '1s' } : {}}
         >
           <button
             onClick={handleClick}
-            className='bg-white px-8 py-3 border-2 border-black font-bold text-black text-lg rounded-xl shadow-[2px_2px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none'
+            className='bg-white cursor-pointer px-8 py-3 border-2 border-black font-bold text-black text-lg rounded-xl shadow-[2px_2px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none'
           >
             {buttonText}
           </button>

package/src/components/upload.tsx

@@ -138,7 +138,7 @@ export default function Upload({
           </div>
           <button
             onClick={handleUpload}
-            className='px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors'
+            className='px-4 py-2 bg-blue-500 text-white rounded-sm hover:bg-blue-600 transition-colors'
           >
             Try Again
           </button>

package/src/components/voicerecorder.tsx

@@ -166,7 +166,7 @@ const AudioVisualizer: React.FC<AudioVisualizerProps> = ({ stream }) => {
       ref={canvasRef}
       width={300}
       height={60}
-      className='mx-auto rounded-lg bg-white shadow-sm'
+      className='mx-auto rounded-lg bg-white shadow-xs'
     />
   );
 };

package/src/index.css

@@ -1,7 +1,73 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
+@source '../dist/**/*.{js,ts,jsx,tsx}';
+
+@theme {
+  --font-*: initial;
+  --font-sans: Atkinson Hyperlegible, sans-serif;
+  --font-atkinson: Atkinson Hyperlegible, sans-serif;
+
+  --animate-slide-down: slideDown 0.8s ease-out forwards;
+  --animate-fade-in: fadeIn 0.5s ease-out forwards;
+
+  @keyframes slideDown {
+    0% {
+      transform: translateY(-10px);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}
+
+
+@keyframes slideDown {
+  0% {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 :root {
   --font-atkinson: 'Atkinson Hyperlegible', system-ui, sans-serif;