nucleus-core-ts 0.8.7 → 0.8.8

package/dist/fe/components/DevicesPage/components/DevicesPage.js

@@ -0,0 +1,450 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
+import { cn } from "../../../utils/cn";
+import { AbstractAnimatedBackground } from "../../AbstractAnimatedBackground";
+import { Button } from "../../Button";
+import { useDevicesStore } from "../store";
+import { devicesPageTheme } from "../theme";
+import { DeviceCard } from "./DeviceCard";
+import { DevicesHeader } from "./DevicesHeader";
+gsap.registerPlugin(useGSAP);
+export function DevicesPage({ variant: _variant = "default", title = "Active Devices", subtitle = "Manage devices that have access to your account", sessionsAction, sessionRevokeAction, sessionRevokeAllAction, sessionsStatsAction, sessionsPendingAction, sessionApproveAction, sessionRejectAction, onDeviceRevoked, onAllDevicesRevoked, onDeviceApproved, onDeviceRejected, showBackground = false, showStats = true, showPendingDevices = true, allowRevokeAll = true, allowRevokeCurrent = false, className }) {
+    const theme = devicesPageTheme;
+    const containerRef = useRef(null);
+    const cardRef = useRef(null);
+    const [showConfirmModal, setShowConfirmModal] = useState(false);
+    const [pendingRevoke, setPendingRevoke] = useState(null);
+    const [pendingDevices, setPendingDevices] = useState([]);
+    const [approvingDevice, setApprovingDevice] = useState(null);
+    const store = useDevicesStore();
+    const fetchSessions = useEffectEvent(()=>{
+        store.setLoading(true);
+        store.setError(null);
+        sessionsAction.start({
+            payload: undefined,
+            onAfterHandle: (data)=>{
+                const response = data;
+                if (response?.data?.sessions) {
+                    store.setDevices(response.data.sessions);
+                    store.setCurrentSessionId(response.data.currentSessionId || null);
+                }
+                store.setLoading(false);
+            },
+            onErrorHandle: (error)=>{
+                store.setError(error instanceof Error ? error.message : "Failed to load devices");
+                store.setLoading(false);
+            }
+        });
+    });
+    const fetchStats = useEffectEvent(()=>{
+        if (!sessionsStatsAction) return;
+        sessionsStatsAction.start({
+            payload: undefined,
+            onAfterHandle: (data)=>{
+                const response = data;
+                if (response?.data) {
+                    store.setStats(response.data);
+                }
+            },
+            onErrorHandle: ()=>{}
+        });
+    });
+    const fetchPendingDevices = useEffectEvent(()=>{
+        if (!sessionsPendingAction || !showPendingDevices) return;
+        sessionsPendingAction.start({
+            payload: undefined,
+            onAfterHandle: (data)=>{
+                const response = data;
+                if (response?.data?.sessions) {
+                    setPendingDevices(response.data.sessions);
+                }
+            },
+            onErrorHandle: ()=>{}
+        });
+    });
+    const handleApprove = (device)=>{
+        if (!sessionApproveAction || !device.approvalToken) return;
+        setApprovingDevice(device.id);
+        sessionApproveAction.start({
+            payload: {
+                token: device.approvalToken
+            },
+            onAfterHandle: ()=>{
+                setPendingDevices((prev)=>prev.filter((d)=>d.id !== device.id));
+                setApprovingDevice(null);
+                onDeviceApproved?.(device.id);
+                fetchSessions();
+            },
+            onErrorHandle: ()=>{
+                setApprovingDevice(null);
+            }
+        });
+    };
+    const handleReject = (device)=>{
+        if (!sessionRejectAction || !device.approvalToken) return;
+        setApprovingDevice(device.id);
+        sessionRejectAction.start({
+            payload: {
+                token: device.approvalToken
+            },
+            onAfterHandle: ()=>{
+                setPendingDevices((prev)=>prev.filter((d)=>d.id !== device.id));
+                setApprovingDevice(null);
+                onDeviceRejected?.(device.id);
+            },
+            onErrorHandle: ()=>{
+                setApprovingDevice(null);
+            }
+        });
+    };
+    useEffect(()=>{
+        fetchSessions();
+        if (showStats) {
+            fetchStats();
+        }
+        if (showPendingDevices) {
+            fetchPendingDevices();
+        }
+    }, [
+        showStats,
+        showPendingDevices
+    ]);
+    useGSAP(()=>{
+        if (!cardRef.current) return;
+        gsap.fromTo(cardRef.current, {
+            opacity: 0,
+            y: 30
+        }, {
+            opacity: 1,
+            y: 0,
+            duration: 0.6,
+            ease: "power3.out"
+        });
+    }, {
+        scope: containerRef
+    });
+    const handleRevoke = (sessionId)=>{
+        setPendingRevoke(sessionId);
+        setShowConfirmModal(true);
+    };
+    const confirmRevoke = ()=>{
+        if (!pendingRevoke) return;
+        store.setRevoking(pendingRevoke);
+        setShowConfirmModal(false);
+        sessionRevokeAction.start({
+            payload: {
+                _sessionId: pendingRevoke,
+                reason: "user_revoked"
+            },
+            onAfterHandle: ()=>{
+                store.removeDevice(pendingRevoke);
+                store.setRevoking(null);
+                onDeviceRevoked?.(pendingRevoke);
+                setPendingRevoke(null);
+            },
+            onErrorHandle: (error)=>{
+                store.setError(error instanceof Error ? error.message : "Failed to revoke device");
+                store.setRevoking(null);
+                setPendingRevoke(null);
+            }
+        });
+    };
+    const handleRevokeAll = ()=>{
+        store.setRevokingAll(true);
+        sessionRevokeAllAction.start({
+            payload: {
+                excludeCurrent: true,
+                reason: "user_revoked_all"
+            },
+            onAfterHandle: ()=>{
+                store.clearAllDevices(true);
+                store.setRevokingAll(false);
+                onAllDevicesRevoked?.();
+            },
+            onErrorHandle: (error)=>{
+                store.setError(error instanceof Error ? error.message : "Failed to revoke all devices");
+                store.setRevokingAll(false);
+            }
+        });
+    };
+    const otherDevicesCount = store.devices.filter((d)=>d.id !== store.currentSessionId).length;
+    return /*#__PURE__*/ _jsxs("main", {
+        ref: containerRef,
+        className: cn(theme.container.base, className),
+        "aria-label": "Devices management page",
+        children: [
+            showBackground && /*#__PURE__*/ _jsx(AbstractAnimatedBackground, {}),
+            /*#__PURE__*/ _jsx("div", {
+                className: theme.container.wrapper,
+                children: /*#__PURE__*/ _jsxs("article", {
+                    ref: cardRef,
+                    className: cn(theme.card.base, theme.card.padding, theme.card.background, theme.card.border, theme.card.shadow, theme.card.rounded),
+                    children: [
+                        /*#__PURE__*/ _jsx(DevicesHeader, {
+                            title: title,
+                            subtitle: subtitle,
+                            totalDevices: store.devices.length,
+                            onRevokeAll: handleRevokeAll,
+                            isRevokingAll: store.isRevokingAll,
+                            allowRevokeAll: allowRevokeAll && otherDevicesCount > 0
+                        }),
+                        showStats && store.stats && /*#__PURE__*/ _jsxs("div", {
+                            className: theme.stats.container,
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: theme.stats.item,
+                                    children: [
+                                        /*#__PURE__*/ _jsx("p", {
+                                            className: theme.stats.value,
+                                            children: store.stats.activeSessions
+                                        }),
+                                        /*#__PURE__*/ _jsx("p", {
+                                            className: theme.stats.label,
+                                            children: "Active Sessions"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: theme.stats.item,
+                                    children: [
+                                        /*#__PURE__*/ _jsx("p", {
+                                            className: theme.stats.value,
+                                            children: store.stats.uniqueDevices
+                                        }),
+                                        /*#__PURE__*/ _jsx("p", {
+                                            className: theme.stats.label,
+                                            children: "Unique Devices"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: theme.stats.item,
+                                    children: [
+                                        /*#__PURE__*/ _jsx("p", {
+                                            className: theme.stats.value,
+                                            children: store.stats.uniqueIpAddresses
+                                        }),
+                                        /*#__PURE__*/ _jsx("p", {
+                                            className: theme.stats.label,
+                                            children: "IP Addresses"
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        store.error && /*#__PURE__*/ _jsx("div", {
+                            className: theme.error.container,
+                            children: /*#__PURE__*/ _jsx("p", {
+                                className: theme.error.text,
+                                children: store.error
+                            })
+                        }),
+                        showPendingDevices && pendingDevices.length > 0 && /*#__PURE__*/ _jsxs("section", {
+                            className: "mb-8",
+                            children: [
+                                /*#__PURE__*/ _jsxs("h2", {
+                                    className: "text-lg font-semibold text-amber-600 mb-4 flex items-center gap-2",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "inline-block w-2 h-2 bg-amber-500 rounded-full animate-pulse"
+                                        }),
+                                        "Pending Approval (",
+                                        pendingDevices.length,
+                                        ")"
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: theme.deviceList.grid,
+                                    children: pendingDevices.map((device)=>/*#__PURE__*/ _jsxs("div", {
+                                            className: "bg-amber-50 border border-amber-200 rounded-xl p-4 dark:bg-amber-900/20 dark:border-amber-800",
+                                            children: [
+                                                /*#__PURE__*/ _jsxs("div", {
+                                                    className: "flex items-start gap-3 mb-3",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("div", {
+                                                            className: "p-2 bg-amber-100 rounded-lg dark:bg-amber-800",
+                                                            children: /*#__PURE__*/ _jsxs("svg", {
+                                                                className: "w-5 h-5 text-amber-600",
+                                                                fill: "none",
+                                                                viewBox: "0 0 24 24",
+                                                                stroke: "currentColor",
+                                                                "aria-hidden": "true",
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsx("title", {
+                                                                        children: "Device"
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx("path", {
+                                                                        strokeLinecap: "round",
+                                                                        strokeLinejoin: "round",
+                                                                        strokeWidth: 2,
+                                                                        d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                                                                    })
+                                                                ]
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ _jsxs("div", {
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx("p", {
+                                                                    className: "font-medium text-gray-900 dark:text-white",
+                                                                    children: device.deviceName || "Unknown Device"
+                                                                }),
+                                                                /*#__PURE__*/ _jsxs("p", {
+                                                                    className: "text-sm text-gray-500",
+                                                                    children: [
+                                                                        device.browserName,
+                                                                        " • ",
+                                                                        device.osName
+                                                                    ]
+                                                                })
+                                                            ]
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsxs("div", {
+                                                    className: "text-sm text-gray-600 dark:text-gray-400 mb-4",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsxs("p", {
+                                                            children: [
+                                                                "IP: ",
+                                                                device.ipAddress || "Unknown"
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ _jsxs("p", {
+                                                            children: [
+                                                                "Requested:",
+                                                                " ",
+                                                                device.approvalRequestedAt ? new Date(device.approvalRequestedAt).toLocaleString() : "Unknown"
+                                                            ]
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsxs("div", {
+                                                    className: "flex gap-2",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(Button, {
+                                                            variant: "primary",
+                                                            size: "sm",
+                                                            onClick: ()=>handleApprove(device),
+                                                            disabled: approvingDevice === device.id,
+                                                            className: "flex-1 bg-green-600 hover:bg-green-700",
+                                                            children: approvingDevice === device.id ? "..." : "✓ Approve"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(Button, {
+                                                            variant: "outline",
+                                                            size: "sm",
+                                                            onClick: ()=>handleReject(device),
+                                                            disabled: approvingDevice === device.id,
+                                                            className: "flex-1 text-red-600 border-red-200 hover:bg-red-50",
+                                                            children: approvingDevice === device.id ? "..." : "✗ Reject"
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        }, device.id))
+                                })
+                            ]
+                        }),
+                        store.isLoading ? /*#__PURE__*/ _jsxs("div", {
+                            className: theme.loading.container,
+                            children: [
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: theme.loading.spinner
+                                }),
+                                /*#__PURE__*/ _jsx("p", {
+                                    className: theme.loading.text,
+                                    children: "Loading devices..."
+                                })
+                            ]
+                        }) : store.devices.length === 0 ? /*#__PURE__*/ _jsxs("div", {
+                            className: theme.deviceList.empty.container,
+                            children: [
+                                /*#__PURE__*/ _jsxs("svg", {
+                                    className: theme.deviceList.empty.icon,
+                                    fill: "none",
+                                    viewBox: "0 0 24 24",
+                                    stroke: "currentColor",
+                                    "aria-hidden": "true",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("title", {
+                                            children: "No devices"
+                                        }),
+                                        /*#__PURE__*/ _jsx("path", {
+                                            strokeLinecap: "round",
+                                            strokeLinejoin: "round",
+                                            strokeWidth: 1,
+                                            d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx("p", {
+                                    className: theme.deviceList.empty.text,
+                                    children: "No active devices found"
+                                })
+                            ]
+                        }) : /*#__PURE__*/ _jsx("section", {
+                            className: theme.deviceList.container,
+                            children: /*#__PURE__*/ _jsx("div", {
+                                className: theme.deviceList.grid,
+                                children: store.devices.map((device)=>/*#__PURE__*/ _jsx(DeviceCard, {
+                                        device: device,
+                                        isCurrent: device.id === store.currentSessionId || device.isCurrent,
+                                        onRevoke: device.id !== store.currentSessionId && !device.isCurrent || allowRevokeCurrent ? handleRevoke : undefined,
+                                        isRevoking: store.isRevoking === device.id
+                                    }, device.id))
+                            })
+                        })
+                    ]
+                })
+            }),
+            showConfirmModal && /*#__PURE__*/ _jsx("div", {
+                className: theme.modal.overlay,
+                onClick: ()=>setShowConfirmModal(false),
+                onKeyDown: (e)=>e.key === "Escape" && setShowConfirmModal(false),
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-labelledby": "confirm-modal-title",
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: theme.modal.container,
+                    onClick: (e)=>e.stopPropagation(),
+                    onKeyDown: (e)=>e.stopPropagation(),
+                    role: "document",
+                    children: [
+                        /*#__PURE__*/ _jsx("h2", {
+                            id: "confirm-modal-title",
+                            className: theme.modal.title,
+                            children: "Revoke Device Access"
+                        }),
+                        /*#__PURE__*/ _jsx("p", {
+                            className: theme.modal.message,
+                            children: "Are you sure you want to revoke access for this device? The user will be logged out immediately."
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: theme.modal.actions,
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "outline",
+                                    size: "sm",
+                                    onClick: ()=>{
+                                        setShowConfirmModal(false);
+                                        setPendingRevoke(null);
+                                    },
+                                    children: "Cancel"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "primary",
+                                    size: "sm",
+                                    onClick: confirmRevoke,
+                                    className: "bg-red-600 hover:bg-red-700",
+                                    children: "Revoke Access"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}

package/dist/fe/components/DevicesPage/index.js

@@ -0,0 +1,5 @@
+export { DeviceCard } from "./components/DeviceCard";
+export { DevicesHeader } from "./components/DevicesHeader";
+export { DevicesPage } from "./components/DevicesPage";
+export { useDevicesStore } from "./store";
+export { devicesPageTheme, extendDevicesPageTheme } from "./theme";

package/dist/fe/components/DevicesPage/store/index.js

@@ -0,0 +1,55 @@
+"use client";
+import { batch, createStore } from "h-state";
+const initialState = {
+    devices: [],
+    currentSessionId: null,
+    isLoading: false,
+    isRevoking: null,
+    isRevokingAll: false,
+    error: null,
+    stats: null
+};
+export const { useStore: useDevicesStore } = createStore(initialState, {
+    setDevices: (store)=>(devices)=>{
+            store.devices = devices;
+        },
+    setCurrentSessionId: (store)=>(sessionId)=>{
+            store.currentSessionId = sessionId;
+        },
+    setLoading: (store)=>(value)=>{
+            store.isLoading = value;
+        },
+    setRevoking: (store)=>(sessionId)=>{
+            store.isRevoking = sessionId;
+        },
+    setRevokingAll: (store)=>(value)=>{
+            store.isRevokingAll = value;
+        },
+    setError: (store)=>(error)=>{
+            store.error = error;
+        },
+    setStats: (store)=>(stats)=>{
+            store.stats = stats;
+        },
+    removeDevice: (store)=>(sessionId)=>{
+            store.devices = store.devices.filter((d)=>d.id !== sessionId);
+        },
+    clearAllDevices: (store)=>(excludeCurrent)=>{
+            if (excludeCurrent && store.currentSessionId) {
+                store.devices = store.devices.filter((d)=>d.id === store.currentSessionId);
+            } else {
+                store.devices = [];
+            }
+        },
+    reset: (store)=>()=>{
+            batch(()=>{
+                store.devices = [];
+                store.currentSessionId = null;
+                store.isLoading = false;
+                store.isRevoking = null;
+                store.isRevokingAll = false;
+                store.error = null;
+                store.stats = null;
+            });
+        }
+});

package/dist/fe/components/DevicesPage/theme/index.js

@@ -0,0 +1,131 @@
+export const devicesPageTheme = {
+    container: {
+        base: "relative min-h-screen w-full",
+        wrapper: "relative z-10 w-full max-w-6xl mx-auto px-4 py-8 sm:px-6 lg:px-8"
+    },
+    card: {
+        base: "w-full",
+        padding: "p-6 sm:p-8",
+        background: "bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl",
+        border: "border border-white/20 dark:border-zinc-800/50",
+        shadow: "shadow-xl shadow-black/5 dark:shadow-black/20",
+        rounded: "rounded-2xl"
+    },
+    header: {
+        container: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8",
+        titleWrapper: "flex-1",
+        title: "text-2xl sm:text-3xl font-bold text-zinc-900 dark:text-white",
+        subtitle: "mt-1 text-sm sm:text-base text-zinc-600 dark:text-zinc-400",
+        badge: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400 ml-3",
+        actions: "flex-shrink-0"
+    },
+    stats: {
+        container: "grid grid-cols-3 gap-4 mb-8 p-4 rounded-xl bg-zinc-50 dark:bg-zinc-800/50",
+        item: "text-center",
+        value: "text-2xl font-bold text-zinc-900 dark:text-white",
+        label: "text-xs text-zinc-500 dark:text-zinc-400 mt-1"
+    },
+    deviceList: {
+        container: "mt-6",
+        grid: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
+        empty: {
+            container: "flex flex-col items-center justify-center py-12 text-center",
+            icon: "w-16 h-16 text-zinc-300 dark:text-zinc-600 mb-4",
+            text: "text-zinc-500 dark:text-zinc-400"
+        }
+    },
+    deviceCard: {
+        base: "group relative flex flex-col transition-all duration-200",
+        padding: "p-4 sm:p-5",
+        background: "bg-white dark:bg-zinc-800/60",
+        backgroundCurrent: "bg-blue-50/50 dark:bg-blue-900/10",
+        border: "border border-zinc-200 dark:border-zinc-700/50",
+        borderCurrent: "border-blue-300 dark:border-blue-700/50",
+        shadow: "shadow-sm",
+        rounded: "rounded-xl",
+        hover: "hover:shadow-md hover:border-zinc-300 dark:hover:border-zinc-600",
+        header: {
+            container: "flex items-start gap-3 mb-3",
+            icon: "flex-shrink-0 w-10 h-10 rounded-lg bg-zinc-100 dark:bg-zinc-700 flex items-center justify-center text-zinc-500 dark:text-zinc-400",
+            iconCurrent: "bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400",
+            info: "flex-1 min-w-0",
+            deviceName: "font-medium text-zinc-900 dark:text-white truncate",
+            deviceType: "text-xs text-zinc-500 dark:text-zinc-400 mt-0.5"
+        },
+        details: {
+            container: "space-y-2 text-sm",
+            row: "flex items-center justify-between",
+            label: "text-zinc-500 dark:text-zinc-400",
+            value: "text-zinc-700 dark:text-zinc-300 truncate ml-2 text-right"
+        },
+        footer: {
+            container: "flex items-center justify-between mt-4 pt-4 border-t border-zinc-100 dark:border-zinc-700/50",
+            currentBadge: "inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+            revokeButton: "text-xs text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 font-medium transition-colors"
+        },
+        trustScore: {
+            container: "mt-3",
+            bar: "h-1.5 w-full bg-zinc-200 dark:bg-zinc-700 rounded-full overflow-hidden",
+            barFill: "h-full rounded-full transition-all duration-300",
+            label: "text-xs text-zinc-500 dark:text-zinc-400 mt-1"
+        }
+    },
+    modal: {
+        overlay: "fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4",
+        container: "bg-white dark:bg-zinc-800 rounded-2xl shadow-2xl max-w-md w-full p-6",
+        title: "text-lg font-semibold text-zinc-900 dark:text-white mb-2",
+        message: "text-sm text-zinc-600 dark:text-zinc-400 mb-6",
+        actions: "flex gap-3 justify-end"
+    },
+    loading: {
+        container: "flex flex-col items-center justify-center py-12",
+        spinner: "w-8 h-8 border-2 border-zinc-200 border-t-blue-600 rounded-full animate-spin",
+        text: "mt-4 text-sm text-zinc-500 dark:text-zinc-400"
+    },
+    error: {
+        container: "p-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800",
+        text: "text-sm text-red-600 dark:text-red-400"
+    }
+};
+export function extendDevicesPageTheme(overrides) {
+    return {
+        ...devicesPageTheme,
+        ...overrides,
+        container: {
+            ...devicesPageTheme.container,
+            ...overrides.container
+        },
+        card: {
+            ...devicesPageTheme.card,
+            ...overrides.card
+        },
+        header: {
+            ...devicesPageTheme.header,
+            ...overrides.header
+        },
+        stats: {
+            ...devicesPageTheme.stats,
+            ...overrides.stats
+        },
+        deviceList: {
+            ...devicesPageTheme.deviceList,
+            ...overrides.deviceList
+        },
+        deviceCard: {
+            ...devicesPageTheme.deviceCard,
+            ...overrides.deviceCard
+        },
+        modal: {
+            ...devicesPageTheme.modal,
+            ...overrides.modal
+        },
+        loading: {
+            ...devicesPageTheme.loading,
+            ...overrides.loading
+        },
+        error: {
+            ...devicesPageTheme.error,
+            ...overrides.error
+        }
+    };
+}

package/dist/fe/components/DevicesPage/types/index.js

@@ -0,0 +1 @@
+export { };