primus-saas-react 1.0.4 → 1.0.6

package/dist/styles.css

@@ -1,14 +1,21 @@
-/* Primus SaaS React - Bundled Styles */
-/* Import this file: import 'primus-saas-react/dist/styles.css' */
+/* Primus SaaS React - Complete Bundled Styles */
+/* Import: import 'primus-saas-react/dist/styles.css' */
 
-/* Base resets */
+/* Reset */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
+    margin: 0;
+    padding: 0;
 }
 
-/* Animation utilities */
+html,
+body {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* Animations */
 @keyframes pulse {
     50% {
         opacity: .5;
@@ -21,37 +28,6 @@
     }
 }
 
-@keyframes ping {
-
-    75%,
-    100% {
-        transform: scale(2);
-        opacity: 0;
-    }
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes slideIn {
-    from {
-        transform: translateY(-10px);
-        opacity: 0;
-    }
-
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
-}
-
 .animate-pulse {
     animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
@@ -60,11 +36,7 @@
     animation: spin 1s linear infinite;
 }
 
-.animate-ping {
-    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
-}
-
-/* Layout */
+/* Layout - Critical */
 .min-h-screen {
     min-height: 100vh;
 }
@@ -77,18 +49,6 @@
     display: inline-flex;
 }
 
-.grid {
-    display: grid;
-}
-
-.hidden {
-    display: none;
-}
-
-.block {
-    display: block;
-}
-
 .items-center {
     align-items: center;
 }
@@ -105,6 +65,16 @@
     flex-direction: column;
 }
 
+/* Grid */
+.grid {
+    display: grid;
+}
+
+.grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+/* Gaps */
 .gap-2 {
     gap: 0.5rem;
 }
@@ -129,7 +99,7 @@
     margin-top: 1rem;
 }
 
-/* Sizing */
+/* Width/Height */
 .w-full {
     width: 100%;
 }
@@ -154,15 +124,11 @@
     width: 3rem;
 }
 
-/* Spacing */
+/* Padding */
 .p-2 {
     padding: 0.5rem;
 }
 
-.p-3 {
-    padding: 0.75rem;
-}
-
 .p-4 {
     padding: 1rem;
 }
@@ -171,6 +137,11 @@
     padding: 2rem;
 }
 
+.px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
+
 .px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -186,6 +157,16 @@
     padding-bottom: 0.625rem;
 }
 
+/* Margin */
+.m-0 {
+    margin: 0;
+}
+
+.mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+}
+
 .mb-4 {
     margin-bottom: 1rem;
 }
@@ -210,11 +191,6 @@
     margin-top: 1.5rem;
 }
 
-.mx-auto {
-    margin-left: auto;
-    margin-right: auto;
-}
-
 .ml-1 {
     margin-left: 0.25rem;
 }
@@ -224,7 +200,7 @@
     margin-bottom: 1.5rem;
 }
 
-/* Typography */
+/* Text */
 .text-center {
     text-align: center;
 }
@@ -274,7 +250,7 @@
     text-transform: uppercase;
 }
 
-/* Colors */
+/* Colors - Text */
 .text-white {
     color: #ffffff;
 }
@@ -307,6 +283,19 @@
     color: #2563eb;
 }
 
+.text-slate-300 {
+    color: #cbd5e1;
+}
+
+.text-slate-400 {
+    color: #94a3b8;
+}
+
+.text-slate-600 {
+    color: #475569;
+}
+
+/* Colors - Background */
 .bg-white {
     background-color: #ffffff;
 }
@@ -319,10 +308,18 @@
     background-color: #f3f4f6;
 }
 
+.bg-gray-800 {
+    background-color: #1f2937;
+}
+
 .bg-gray-900 {
     background-color: #111827;
 }
 
+.bg-gray-950 {
+    background-color: #030712;
+}
+
 .bg-violet-600 {
     background-color: #7c3aed;
 }
@@ -335,6 +332,19 @@
     background-color: #000000;
 }
 
+.bg-slate-700 {
+    background-color: #334155;
+}
+
+.bg-gray-900\/50 {
+    background-color: rgba(17, 24, 39, 0.5);
+}
+
+.bg-gray-950\/50 {
+    background-color: rgba(3, 7, 18, 0.5);
+}
+
+/* Gradients */
 .bg-gradient-to-br {
     background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -345,29 +355,43 @@
 
 .from-gray-50 {
     --tw-gradient-from: #f9fafb;
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
-}
-
-.from-violet-600 {
-    --tw-gradient-from: #7c3aed;
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
+    --tw-gradient-to: transparent;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
 .via-white {
-    --tw-gradient-stops: var(--tw-gradient-from), #ffffff, var(--tw-gradient-to, transparent);
+    --tw-gradient-to: transparent;
+    --tw-gradient-stops: var(--tw-gradient-from), #ffffff, var(--tw-gradient-to);
 }
 
 .to-violet-50 {
     --tw-gradient-to: #f5f3ff;
 }
 
+.from-violet-600 {
+    --tw-gradient-from: #7c3aed;
+    --tw-gradient-to: transparent;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .to-purple-600 {
     --tw-gradient-to: #9333ea;
 }
 
+.from-blue-600 {
+    --tw-gradient-from: #2563eb;
+    --tw-gradient-to: transparent;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.to-indigo-600 {
+    --tw-gradient-to: #4f46e5;
+}
+
 /* Borders */
 .border {
     border-width: 1px;
+    border-style: solid;
 }
 
 .border-t {
@@ -382,6 +406,18 @@
     border-color: #d1d5db;
 }
 
+.border-slate-700 {
+    border-color: #334155;
+}
+
+.border-white\/10 {
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+.border-0 {
+    border-width: 0;
+}
+
 .rounded {
     border-radius: 0.25rem;
 }
@@ -411,21 +447,34 @@
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 
+.shadow-2xl {
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
 .shadow-violet-500\/20 {
     box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.2);
 }
 
+.shadow-blue-500\/20 {
+    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.2);
+}
+
 /* Effects */
 .backdrop-blur-xl {
     backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
+}
+
+.opacity-50 {
+    opacity: 0.5;
 }
 
 .opacity-90 {
     opacity: 0.9;
 }
 
-.opacity-50 {
-    opacity: 0.5;
+.overflow-hidden {
+    overflow: hidden;
 }
 
 /* Transitions */
@@ -460,6 +509,7 @@
     opacity: 0.5;
 }
 
+/* Hover states */
 .hover\:bg-gray-50:hover {
     background-color: #f9fafb;
 }
@@ -468,6 +518,14 @@
     background-color: #f3f4f6;
 }
 
+.hover\:bg-gray-800:hover {
+    background-color: #1f2937;
+}
+
+.hover\:bg-gray-900:hover {
+    background-color: #111827;
+}
+
 .hover\:bg-violet-500:hover {
     background-color: #8b5cf6;
 }
@@ -476,23 +534,41 @@
     opacity: 0.9;
 }
 
+/* Focus states */
 .focus\:outline-none:focus {
     outline: 2px solid transparent;
     outline-offset: 2px;
 }
 
 .focus\:ring-1:focus {
-    box-shadow: 0 0 0 1px var(--tw-ring-color);
+    box-shadow: 0 0 0 1px var(--tw-ring-color, #7c3aed);
 }
 
 .focus\:ring-violet-500:focus {
     --tw-ring-color: #8b5cf6;
 }
 
+.focus\:ring-blue-500:focus {
+    --tw-ring-color: #3b82f6;
+}
+
 .focus\:border-violet-500:focus {
     border-color: #8b5cf6;
 }
 
+.focus\:border-blue-500:focus {
+    border-color: #3b82f6;
+}
+
+/* Placeholder */
+.placeholder\:text-gray-400::placeholder {
+    color: #9ca3af;
+}
+
+.placeholder\:text-slate-600::placeholder {
+    color: #475569;
+}
+
 /* Position */
 .relative {
     position: relative;
@@ -513,56 +589,63 @@
     z-index: 10;
 }
 
-/* Placeholder */
-.placeholder\:text-gray-400::placeholder {
-    color: #9ca3af;
+.-top-\[20\%\] {
+    top: -20%;
 }
 
-/* Social button specific colors */
-.\!bg-\[\#0078D4\] {
-    background-color: #0078D4 !important;
+.-left-\[10\%\] {
+    left: -10%;
 }
 
-.\!bg-\[\#1877F2\] {
-    background-color: #1877F2 !important;
+.-bottom-\[20\%\] {
+    bottom: -20%;
 }
 
-.bg-\[\#0078D4\] {
-    background-color: #0078D4;
+.-right-\[10\%\] {
+    right: -10%;
 }
 
-.bg-\[\#006CBD\] {
-    background-color: #006CBD;
+.w-\[50\%\] {
+    width: 50%;
 }
 
-.bg-\[\#1877F2\] {
-    background-color: #1877F2;
+.h-\[50\%\] {
+    height: 50%;
 }
 
-.bg-\[\#166FE5\] {
-    background-color: #166FE5;
+.blur-\[120px\] {
+    filter: blur(120px);
 }
 
-.border-\[\#0078D4\] {
-    border-color: #0078D4;
+.bg-blue-600\/20 {
+    background-color: rgba(37, 99, 235, 0.2);
 }
 
-.border-\[\#1877F2\] {
-    border-color: #1877F2;
+.bg-purple-600\/20 {
+    background-color: rgba(147, 51, 234, 0.2);
+}
+
+/* Social button colors */
+.bg-\[\#0078D4\] {
+    background-color: #0078D4;
 }
 
 .hover\:bg-\[\#006CBD\]:hover {
     background-color: #006CBD;
 }
 
-.hover\:bg-\[\#166FE5\]:hover {
-    background-color: #166FE5;
+.border-\[\#0078D4\] {
+    border-color: #0078D4;
 }
 
-.hover\:bg-gray-800:hover {
-    background-color: #1f2937;
+.bg-\[\#1877F2\] {
+    background-color: #1877F2;
 }
 
-.hover\:bg-gray-900:hover {
-    background-color: #111827;
+.hover\:bg-\[\#166FE5\]:hover {
+    background-color: #166FE5;
+}
+
+.border-\[\#1877F2\] {
+    border-color: #1877F2;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "primus-saas-react",
-    "version": "1.0.4",
+    "version": "1.0.6",
     "description": "Premium React UI Elements for Primus SaaS Framework",
     "main": "dist/index.js",
     "module": "dist/index.mjs",
@@ -18,15 +18,15 @@
         "dev": "tsup src/index.ts --format cjs,esm --watch --dts"
     },
     "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
+        "react": ">=18 || >=19",
+        "react-dom": ">=18 || >=19"
     },
     "dependencies": {
-        "@headlessui/react": "^1.7.17",
-        "@heroicons/react": "^2.0.18",
-        "clsx": "^2.0.0",
-        "lucide-react": "^0.300.0",
-        "tailwind-merge": "^2.0.0"
+        "@headlessui/react": "^2.2.0",
+        "@heroicons/react": "^2.2.0",
+        "clsx": "^2.1.0",
+        "lucide-react": "^0.469.0",
+        "tailwind-merge": "^2.6.0"
     },
     "devDependencies": {
         "@types/react": "^18.2.0",