primus-saas-react 1.0.3 → 1.0.5

package/dist/styles.css

@@ -0,0 +1,568 @@
+/* Primus SaaS React - Bundled Styles */
+/* Import this file: import 'primus-saas-react/dist/styles.css' */
+
+/* Base resets */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* Animation utilities */
+@keyframes pulse {
+    50% {
+        opacity: .5;
+    }
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@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;
+}
+
+.animate-spin {
+    animation: spin 1s linear infinite;
+}
+
+.animate-ping {
+    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+/* Layout */
+.min-h-screen {
+    min-height: 100vh;
+}
+
+.flex {
+    display: flex;
+}
+
+.inline-flex {
+    display: inline-flex;
+}
+
+.grid {
+    display: grid;
+}
+
+.hidden {
+    display: none;
+}
+
+.block {
+    display: block;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.flex-col {
+    flex-direction: column;
+}
+
+.gap-2 {
+    gap: 0.5rem;
+}
+
+.gap-3 {
+    gap: 0.75rem;
+}
+
+.gap-4 {
+    gap: 1rem;
+}
+
+.space-y-2>*+* {
+    margin-top: 0.5rem;
+}
+
+.space-y-3>*+* {
+    margin-top: 0.75rem;
+}
+
+.space-y-4>*+* {
+    margin-top: 1rem;
+}
+
+/* Sizing */
+.w-full {
+    width: 100%;
+}
+
+.max-w-md {
+    max-width: 28rem;
+}
+
+.h-5 {
+    height: 1.25rem;
+}
+
+.w-5 {
+    width: 1.25rem;
+}
+
+.h-12 {
+    height: 3rem;
+}
+
+.w-12 {
+    width: 3rem;
+}
+
+/* Spacing */
+.p-2 {
+    padding: 0.5rem;
+}
+
+.p-3 {
+    padding: 0.75rem;
+}
+
+.p-4 {
+    padding: 1rem;
+}
+
+.p-8 {
+    padding: 2rem;
+}
+
+.px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+.py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+}
+
+.py-2\.5 {
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+}
+
+.mb-4 {
+    margin-bottom: 1rem;
+}
+
+.mb-6 {
+    margin-bottom: 1.5rem;
+}
+
+.mb-8 {
+    margin-bottom: 2rem;
+}
+
+.mt-2 {
+    margin-top: 0.5rem;
+}
+
+.mt-4 {
+    margin-top: 1rem;
+}
+
+.mt-6 {
+    margin-top: 1.5rem;
+}
+
+.mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.ml-1 {
+    margin-left: 0.25rem;
+}
+
+.my-6 {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+/* Typography */
+.text-center {
+    text-align: center;
+}
+
+.text-xs {
+    font-size: 0.75rem;
+    line-height: 1rem;
+}
+
+.text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+}
+
+.text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+}
+
+.text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+}
+
+.text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+}
+
+.font-medium {
+    font-weight: 500;
+}
+
+.font-semibold {
+    font-weight: 600;
+}
+
+.font-bold {
+    font-weight: 700;
+}
+
+.tracking-tight {
+    letter-spacing: -0.025em;
+}
+
+.uppercase {
+    text-transform: uppercase;
+}
+
+/* Colors */
+.text-white {
+    color: #ffffff;
+}
+
+.text-gray-400 {
+    color: #9ca3af;
+}
+
+.text-gray-500 {
+    color: #6b7280;
+}
+
+.text-gray-600 {
+    color: #4b5563;
+}
+
+.text-gray-700 {
+    color: #374151;
+}
+
+.text-gray-900 {
+    color: #111827;
+}
+
+.text-violet-600 {
+    color: #7c3aed;
+}
+
+.text-blue-600 {
+    color: #2563eb;
+}
+
+.bg-white {
+    background-color: #ffffff;
+}
+
+.bg-gray-50 {
+    background-color: #f9fafb;
+}
+
+.bg-gray-100 {
+    background-color: #f3f4f6;
+}
+
+.bg-gray-900 {
+    background-color: #111827;
+}
+
+.bg-violet-600 {
+    background-color: #7c3aed;
+}
+
+.bg-blue-600 {
+    background-color: #2563eb;
+}
+
+.bg-black {
+    background-color: #000000;
+}
+
+.bg-gradient-to-br {
+    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+}
+
+.bg-gradient-to-r {
+    background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
+.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);
+}
+
+.via-white {
+    --tw-gradient-stops: var(--tw-gradient-from), #ffffff, var(--tw-gradient-to, transparent);
+}
+
+.to-violet-50 {
+    --tw-gradient-to: #f5f3ff;
+}
+
+.to-purple-600 {
+    --tw-gradient-to: #9333ea;
+}
+
+/* Borders */
+.border {
+    border-width: 1px;
+}
+
+.border-t {
+    border-top-width: 1px;
+}
+
+.border-gray-200 {
+    border-color: #e5e7eb;
+}
+
+.border-gray-300 {
+    border-color: #d1d5db;
+}
+
+.rounded {
+    border-radius: 0.25rem;
+}
+
+.rounded-lg {
+    border-radius: 0.5rem;
+}
+
+.rounded-xl {
+    border-radius: 0.75rem;
+}
+
+.rounded-2xl {
+    border-radius: 1rem;
+}
+
+.rounded-full {
+    border-radius: 9999px;
+}
+
+/* Shadows */
+.shadow-lg {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.shadow-xl {
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.shadow-violet-500\/20 {
+    box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.2);
+}
+
+/* Effects */
+.backdrop-blur-xl {
+    backdrop-filter: blur(24px);
+}
+
+.opacity-90 {
+    opacity: 0.9;
+}
+
+.opacity-50 {
+    opacity: 0.5;
+}
+
+/* Transitions */
+.transition-all {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+
+.transition-colors {
+    transition-property: color, background-color, border-color;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+
+.transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+
+.duration-200 {
+    transition-duration: 200ms;
+}
+
+/* Interactive */
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.disabled\:opacity-50:disabled {
+    opacity: 0.5;
+}
+
+.hover\:bg-gray-50:hover {
+    background-color: #f9fafb;
+}
+
+.hover\:bg-gray-100:hover {
+    background-color: #f3f4f6;
+}
+
+.hover\:bg-violet-500:hover {
+    background-color: #8b5cf6;
+}
+
+.hover\:opacity-90:hover {
+    opacity: 0.9;
+}
+
+.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);
+}
+
+.focus\:ring-violet-500:focus {
+    --tw-ring-color: #8b5cf6;
+}
+
+.focus\:border-violet-500:focus {
+    border-color: #8b5cf6;
+}
+
+/* Position */
+.relative {
+    position: relative;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.inset-0 {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.z-10 {
+    z-index: 10;
+}
+
+/* Placeholder */
+.placeholder\:text-gray-400::placeholder {
+    color: #9ca3af;
+}
+
+/* Social button specific colors */
+.\!bg-\[\#0078D4\] {
+    background-color: #0078D4 !important;
+}
+
+.\!bg-\[\#1877F2\] {
+    background-color: #1877F2 !important;
+}
+
+.bg-\[\#0078D4\] {
+    background-color: #0078D4;
+}
+
+.bg-\[\#006CBD\] {
+    background-color: #006CBD;
+}
+
+.bg-\[\#1877F2\] {
+    background-color: #1877F2;
+}
+
+.bg-\[\#166FE5\] {
+    background-color: #166FE5;
+}
+
+.border-\[\#0078D4\] {
+    border-color: #0078D4;
+}
+
+.border-\[\#1877F2\] {
+    border-color: #1877F2;
+}
+
+.hover\:bg-\[\#006CBD\]:hover {
+    background-color: #006CBD;
+}
+
+.hover\:bg-\[\#166FE5\]:hover {
+    background-color: #166FE5;
+}
+
+.hover\:bg-gray-800:hover {
+    background-color: #1f2937;
+}
+
+.hover\:bg-gray-900:hover {
+    background-color: #111827;
+}

package/package.json

@@ -1,26 +1,32 @@
 {
     "name": "primus-saas-react",
-    "version": "1.0.3",
+    "version": "1.0.5",
     "description": "Premium React UI Elements for Primus SaaS Framework",
     "main": "dist/index.js",
     "module": "dist/index.mjs",
     "types": "dist/index.d.ts",
-    "sideEffects": false,
+    "style": "dist/styles.css",
+    "sideEffects": [
+        "*.css"
+    ],
+    "files": [
+        "dist"
+    ],
     "scripts": {
         "build": "tsup src/index.ts --format cjs,esm --dts",
         "lint": "eslint src/",
         "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",

package/DEMO.md

@@ -1,68 +0,0 @@
-# Primus Authentication Demo - One-Click Launch
-
-## Prerequisites
-- Node.js 18+
-- .NET 8 SDK
-
-## Quick Start
-
-### 1. Start Backend (Terminal 1)
-```powershell
-cd examples/LiveDemoApi
-dotnet run
-```
-Backend runs at: http://localhost:5221
-
-### 2. Start UI Gallery (Terminal 2)
-```powershell
-cd test-apps/ui-gallery
-npm run dev
-```
-Frontend runs at: http://localhost:5173
-
-## Demo Flow
-
-1. Open http://localhost:5173
-2. Click **"Platform"** tab
-3. Use the **PrimusLogin** component:
-   - Email: `demo@primus.local`
-   - Password: `PrimusDemo123!`
-4. Click **Sign in**
-
-The component will call the real backend API at `/auth/local` and authenticate.
-
-## What's Happening
-
-```
-┌─────────────────┐      POST /auth/local      ┌─────────────────┐
-│   PrimusLogin   │ ───────────────────────>   │   LiveDemoApi   │
-│   (React UI)    │                            │   (.NET 8)      │
-│                 │ <─────────────────────     │                 │
-│                 │    { access_token }        │  PrimusSaaS     │
-└─────────────────┘                            │  Identity SDK   │
-                                               └─────────────────┘
-```
-
-## API Endpoints
-
-| Endpoint | Method | Description |
-|----------|--------|-------------|
-| `/auth/local` | POST | Email/password login |
-| `/auth/auth0` | POST | Auth0 token |
-| `/auth/azure` | POST | Azure AD token |
-| `/whoami` | GET | Get current user (requires Bearer token) |
-
-## Configuration
-
-In your app, wrap with `PrimusProvider`:
-
-```tsx
-<PrimusProvider 
-  authority="http://localhost:5221"  // Your API URL
-  clientId="demo"
-  onLoginSuccess={(user, token) => console.log('Logged in!', user)}
-  onLoginError={(error) => console.error('Failed:', error)}
->
-  <PrimusLogin allowSocial onSuccess={() => navigate('/dashboard')} />
-</PrimusProvider>
-```