@nibssplc/cams-sdk-react 1.0.0-rc.60 → 1.0.0-rc.62

package/dist/index.esm.js

@@ -14,6 +14,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
 import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva } from 'class-variance-authority';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { toast } from 'sonner';
 import { motion } from 'framer-motion';
@@ -1282,77 +1283,33 @@ function FormMessage(_a) {
     return (jsx("p", __assign({ "data-slot": "form-message", id: formMessageId, className: cn("text-destructive text-sm", className) }, props, { children: body })));
 }
 
-// CSS-in-JS styles to replace Tailwind classes for maximum compatibility
-var styles = {
-    button: {
-        base: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: '0.5rem',
-            whiteSpace: 'nowrap',
-            borderRadius: '0.375rem',
-            fontSize: '0.875rem',
-            fontWeight: '500',
-            transition: 'all 0.2s',
-            outline: 'none',
-            cursor: 'pointer',
-            border: 'none',
-        },
-        variants: {
-            default: {
-                backgroundColor: '#3b82f6',
-                color: 'white',
-                padding: '0.5rem 1rem',
-                height: '2.25rem',
-            },
-            outline: {
-                backgroundColor: 'transparent',
-                border: '1px solid #d1d5db',
-                color: '#374151',
-                padding: '0.5rem 1rem',
-                height: '2.25rem',
-            },
-        },
-    },
-    card: {
-        base: {
-            backgroundColor: 'white',
-            border: '1px solid #e5e7eb',
-            borderRadius: '0.75rem',
-            padding: '1.5rem',
-            boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
-        },
-    },
-};
-
 function Card(_a) {
-    var style = _a.style, props = __rest(_a, ["style"]);
-    return (jsx("div", __assign({ "data-slot": "card", style: __assign(__assign(__assign({}, styles.card.base), { display: 'flex', flexDirection: 'column', gap: '1.5rem', paddingTop: '1.5rem', paddingBottom: '1.5rem' }), style) }, props)));
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (jsx("div", __assign({ "data-slot": "card", className: cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", className) }, props)));
 }
 function CardHeader(_a) {
-    var style = _a.style, props = __rest(_a, ["style"]);
-    return (jsx("div", __assign({ "data-slot": "card-header", style: __assign({ display: 'grid', gap: '0.375rem', paddingLeft: '1.5rem', paddingRight: '1.5rem' }, style) }, props)));
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (jsx("div", __assign({ "data-slot": "card-header", className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", className) }, props)));
 }
 function CardTitle(_a) {
-    var style = _a.style, props = __rest(_a, ["style"]);
-    return (jsx("div", __assign({ "data-slot": "card-title", style: __assign({ lineHeight: '1', fontWeight: '600' }, style) }, props)));
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (jsx("div", __assign({ "data-slot": "card-title", className: cn("leading-none font-semibold", className) }, props)));
 }
 function CardDescription(_a) {
-    var style = _a.style, props = __rest(_a, ["style"]);
-    return (jsx("div", __assign({ "data-slot": "card-description", style: __assign({ color: '#6b7280', fontSize: '0.875rem' }, style) }, props)));
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (jsx("div", __assign({ "data-slot": "card-description", className: cn("text-muted-foreground text-sm", className) }, props)));
 }
 function CardAction(_a) {
-    var style = _a.style, props = __rest(_a, ["style"]);
-    return (jsx("div", __assign({ "data-slot": "card-action", style: __assign({ alignSelf: 'flex-start', justifySelf: 'flex-end' }, style) }, props)));
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (jsx("div", __assign({ "data-slot": "card-action", className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className) }, props)));
 }
 function CardContent(_a) {
-    var style = _a.style, props = __rest(_a, ["style"]);
-    return (jsx("div", __assign({ "data-slot": "card-content", style: __assign({ paddingLeft: '1.5rem', paddingRight: '1.5rem' }, style) }, props)));
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (jsx("div", __assign({ "data-slot": "card-content", className: cn("px-6", className) }, props)));
 }
 function CardFooter(_a) {
-    var style = _a.style, props = __rest(_a, ["style"]);
-    return (jsx("div", __assign({ "data-slot": "card-footer", style: __assign({ display: 'flex', alignItems: 'center', paddingLeft: '1.5rem', paddingRight: '1.5rem' }, style) }, props)));
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (jsx("div", __assign({ "data-slot": "card-footer", className: cn("flex items-center px-6 [.border-t]:pt-6", className) }, props)));
 }
 
 var GenericOTPVerifier = function (_a) {
@@ -1385,11 +1342,32 @@ var OTPAuthenticationImg = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2F
 
 var MicrosoftAuthenticatorImg = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3Csvg%20fill%3D%22%23228BE6%22%20version%3D%221.1%22%20baseProfile%3D%22basic%22%20id%3D%22%26%23x421%3B%26%23x43B%3B%26%23x43E%3B%26%23x439%3B_1%22%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2050%2050%22%20%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20marker-start%3D%22none%22%20marker-end%3D%22none%22%20style%3D%22fill%3Anone%3Bstroke%3A%23000000%3Bstroke-width%3A2%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A79.8403%3B%22%20d%3D%22%20M25.001%2C48.001c-9.877%2C0-19-14.025-19-26c0-7.007%2C7.025-9%2C19-9c11.975%2C0%2C19%2C1.993%2C19%2C9C44.001%2C33.975%2C34.878%2C48.001%2C25.001%2C48.001z%22%20%2F%3E%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3A%23000000%3Bstroke-width%3A2%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A79.8403%3B%22%20d%3D%22%20M12.009%2C14.495c0.235-6.781%2C5.185-12.495%2C12.992-12.495c7.805%2C0%2C12.756%2C5.713%2C12.991%2C12.495%22%2F%3E%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3A%23000000%3Bstroke-width%3A2%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A79.8403%3B%22%20d%3D%22%20M17.205%2C13.394c0.761-3.087%2C3.597-6.393%2C7.796-6.393c4.197%2C0%2C7.033%2C3.307%2C7.795%2C6.393%22%2F%3E%3Cpath%20marker-start%3D%22none%22%20marker-end%3D%22none%22%20style%3D%22fill%3Anone%3Bstroke%3A%23000000%3Bstroke-width%3A2%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A79.8403%3B%22%20d%3D%22%20M24.995%2C17.011c3.304%2C0%2C5.987%2C2.681%2C5.987%2C5.984c0%2C3.303-2.683%2C5.984-5.987%2C5.984c-3.304%2C0-5.987-2.681-5.987-5.984%20C19.009%2C19.693%2C21.691%2C17.011%2C24.995%2C17.011z%22%2F%3E%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3A%23000000%3Bstroke-width%3A2%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A79.8403%3B%22%20d%3D%22%20M37.017%2C41.054c-2.4-4.805-6.885-8.041-12.016-8.041c-5.133%2C0-9.617%2C3.235-12.017%2C8.04%22%2F%3E%3C%2Fsvg%3E";
 
+var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary/90",
+            destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+            outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            default: "h-9 px-4 py-2 has-[>svg]:px-3",
+            sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+            lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+            icon: "size-9",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
 function Button(_a) {
-    var _b = _a.variant, variant = _b === void 0 ? 'default' : _b; _a.size; var _d = _a.asChild, asChild = _d === void 0 ? false : _d, style = _a.style, props = __rest(_a, ["variant", "size", "asChild", "style"]);
+    var className = _a.className, variant = _a.variant, size = _a.size, _b = _a.asChild, asChild = _b === void 0 ? false : _b, props = __rest(_a, ["className", "variant", "size", "asChild"]);
     var Comp = asChild ? Slot : "button";
-    var buttonStyle = __assign(__assign(__assign({}, styles.button.base), styles.button.variants[variant]), style);
-    return (jsx(Comp, __assign({ "data-slot": "button", style: buttonStyle }, props)));
+    return (jsx(Comp, __assign({ "data-slot": "button", className: cn(buttonVariants({ variant: variant, size: size, className: className })) }, props)));
 }
 
 function Dialog(_a) {
@@ -1421,7 +1399,7 @@ var a="container_f782f4",i="inner_37f4c9",c="bar_409d0f";const r=({size:r=35,col
 
 var LoadingSpinner = function (_a) {
     var loadingText = _a.loadingText;
-    return (jsxs("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100%', width: '100%', paddingTop: '2.5rem', paddingBottom: '2.5rem' }, children: [jsx("script", { type: "module", defer: true, src: "https://cdn.jsdelivr.net/npm/ldrs/dist/auto/waveform.js" }), jsx(r, { size: "35", stroke: "3.5", speed: "1", color: "green" }), loadingText && (jsx("p", { style: { textAlign: 'center', fontWeight: '600', marginTop: '0.75rem' }, children: "Loading..." }))] }));
+    return (jsxs("div", { className: "flex flex-col justify-center items-center h-full w-full py-10", children: [jsx("script", { type: "module", defer: true, src: "https://cdn.jsdelivr.net/npm/ldrs/dist/auto/waveform.js" }), jsx(r, { size: "35", stroke: "3.5", speed: "1", color: "green" }), loadingText && (jsx("p", { className: "text-center font-semibold mt-3", children: "Loading..." }))] }));
 };
 
 var AuthSuccessAnimation = function (_a) {
@@ -1978,7 +1956,7 @@ var DefaultLoginPage = function (_a) {
 
 var ErrorFallback = function (_a) {
     var message = _a.message;
-    return (jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', backgroundColor: '#f9fafb' }, children: jsxs("div", { style: { backgroundColor: 'white', padding: '1.5rem', borderRadius: '0.5rem', boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)', border: '1px solid #fecaca', maxWidth: '28rem' }, children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.5rem' }, children: [jsx("svg", { style: { width: '1.5rem', height: '1.5rem', color: '#ef4444' }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), jsx("h2", { style: { fontSize: '1.125rem', fontWeight: '600', color: '#111827' }, children: "Configuration Error" })] }), jsx("p", { style: { color: '#dc2626' }, children: message })] }) }));
+    return (jsx("div", { className: "flex items-center justify-center min-h-screen bg-gray-50", children: jsxs("div", { className: "bg-white p-6 rounded-lg shadow-lg border border-red-200 max-w-md", children: [jsxs("div", { className: "flex items-center gap-3 mb-2", children: [jsx("svg", { className: "w-6 h-6 text-red-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }), jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Configuration Error" })] }), jsx("p", { className: "text-red-600", children: message })] }) }));
 };
 
 var MFAEndpointsSchema = z$1.object({
@@ -1989,7 +1967,7 @@ var MFAEndpointsSchema = z$1.object({
     AuthChallengeVerify: z$1.url("MFA AuthChallengeVerify must be a valid URL"),
 });
 var MFAGate = function (_a) {
-    var children = _a.children, _b = _a.fallback, fallback = _b === void 0 ? jsx("div", { style: { height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: jsx(LoadingSpinner, {}) }) : _b, 
+    var children = _a.children, _b = _a.fallback, fallback = _b === void 0 ? jsx("div", { className: 'h-screen flex items-center justify-center', children: jsx(LoadingSpinner, {}) }) : _b, 
     // loginComponent: LoginComponent = DefaultLoginPage,
     _c = _a.usePassKey, 
     // loginComponent: LoginComponent = DefaultLoginPage,