primus-react-ui 1.0.10 → 1.0.12

package/dist/index.mjs

@@ -1114,75 +1114,191 @@ var usePrimusAuth = () => {
 
 // src/components/shared/Button.tsx
 import React13 from "react";
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
 import { jsx as jsx15 } from "react/jsx-runtime";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 var Button = React13.forwardRef(
-  ({ className, variant = "primary", size = "md", ...props }, ref) => {
+  ({ style, variant = "primary", size = "md", color = "sapphire", disabled, ...props }, ref) => {
+    const [isHovered, setIsHovered] = React13.useState(false);
+    const colorStyles = {
+      sapphire: {
+        solid: "#1341a7",
+        // Updated to user spec
+        text: "#ffffff",
+        hover: "rgba(19, 65, 167, 0.9)",
+        subtle: "rgba(19, 65, 167, 0.12)"
+      },
+      emerald: {
+        solid: "#418872",
+        // Updated to user spec
+        text: "#ffffff",
+        hover: "rgba(65, 136, 114, 0.9)",
+        subtle: "rgba(65, 136, 114, 0.12)"
+      },
+      ruby: {
+        solid: "#ac0f0f",
+        // Updated to user spec
+        text: "#ffffff",
+        hover: "rgba(172, 15, 15, 0.9)",
+        subtle: "rgba(172, 15, 15, 0.12)"
+      }
+    };
+    const selectedColor = colorStyles[color];
+    const baseStyles = {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      whiteSpace: "nowrap",
+      borderRadius: "0.5rem",
+      fontSize: "0.875rem",
+      lineHeight: "1.25rem",
+      fontWeight: "600",
+      transition: "all 0.15s cubic-bezier(0.4, 0, 0.2, 1)",
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? 0.5 : 1,
+      pointerEvents: disabled ? "none" : "auto",
+      outline: "none",
+      border: "none",
+      boxShadow: isHovered && !disabled ? "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)" : "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+      transform: isHovered && !disabled ? "translateY(-1px)" : "none"
+    };
+    const variantStyles = {
+      primary: {
+        normal: {
+          backgroundColor: selectedColor.solid,
+          color: selectedColor.text
+        },
+        hover: {
+          backgroundColor: selectedColor.hover
+        }
+      },
+      secondary: {
+        normal: {
+          backgroundColor: "#f3f4f6",
+          color: "#111827"
+        },
+        hover: {
+          backgroundColor: "rgba(243, 244, 246, 0.8)"
+        }
+      },
+      outline: {
+        normal: {
+          backgroundColor: "#ffffff",
+          color: selectedColor.solid,
+          border: `1px solid ${selectedColor.solid}`
+        },
+        hover: {
+          backgroundColor: selectedColor.subtle
+        }
+      },
+      ghost: {
+        normal: {
+          backgroundColor: "transparent",
+          color: selectedColor.solid
+        },
+        hover: {
+          backgroundColor: selectedColor.subtle
+        }
+      }
+    };
+    const sizeStyles = {
+      sm: { height: "2.25rem", padding: "0 0.75rem" },
+      md: { height: "2.5rem", padding: "0.5rem 1rem" },
+      lg: { height: "2.75rem", padding: "0 2rem" }
+    };
+    const currentVariant = variantStyles[variant];
+    const combinedStyles = {
+      ...baseStyles,
+      ...currentVariant.normal,
+      ...isHovered && !disabled ? currentVariant.hover : {},
+      ...sizeStyles[size],
+      ...style
+    };
     return /* @__PURE__ */ jsx15(
       "button",
       {
         ref,
-        className: cn(
-          "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-          {
-            "bg-gray-900 text-gray-50 hover:bg-gray-900/90": variant === "primary",
-            "bg-gray-100 text-gray-900 hover:bg-gray-100/80": variant === "secondary",
-            "border border-gray-200 bg-white hover:bg-gray-100 hover:text-gray-900": variant === "outline",
-            "hover:bg-gray-100 hover:text-gray-900": variant === "ghost",
-            "h-9 px-3": size === "sm",
-            "h-10 px-4 py-2": size === "md",
-            "h-11 px-8": size === "lg"
-          },
-          className
-        ),
+        style: combinedStyles,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        disabled,
         ...props
       }
     );
   }
 );
+Button.displayName = "Button";
 
 // src/components/auth/UserProfile.tsx
 import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
-var UserProfile = () => {
-  const { user, logout, isAuthenticated } = usePrimusAuth();
-  if (!isAuthenticated || !user) {
+var UserProfile = ({
+  user: userOverride,
+  showLogout = true,
+  onLogout
+}) => {
+  const { user: contextUser, logout, isAuthenticated } = usePrimusAuth();
+  const resolvedUser = userOverride ?? (isAuthenticated ? contextUser : null);
+  if (!resolvedUser) {
     return null;
   }
+  const handleLogout = async () => {
+    if (onLogout) {
+      onLogout();
+      return;
+    }
+    await logout();
+  };
   return /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-4 p-4 rounded-lg bg-gray-50 border border-gray-200", children: [
-    /* @__PURE__ */ jsx16("div", { className: "h-10 w-10 rounded-full bg-primus-100 flex items-center justify-center text-primus-600 font-bold", children: user.name?.charAt(0) || "U" }),
+    /* @__PURE__ */ jsx16("div", { className: "h-10 w-10 rounded-full bg-primus-100 flex items-center justify-center text-primus-600 font-bold", children: resolvedUser.name?.charAt(0) || "U" }),
     /* @__PURE__ */ jsxs13("div", { className: "flex-1", children: [
-      /* @__PURE__ */ jsx16("p", { className: "text-sm font-medium text-gray-900", children: user.name }),
-      /* @__PURE__ */ jsx16("p", { className: "text-xs text-gray-500", children: user.email })
+      /* @__PURE__ */ jsx16("p", { className: "text-sm font-medium text-gray-900", children: resolvedUser.name }),
+      resolvedUser.email && /* @__PURE__ */ jsx16("p", { className: "text-xs text-gray-500", children: resolvedUser.email })
     ] }),
-    /* @__PURE__ */ jsx16(Button, { variant: "outline", size: "sm", onClick: () => logout(), children: "Sign out" })
+    showLogout && /* @__PURE__ */ jsx16(Button, { variant: "outline", size: "sm", onClick: handleLogout, children: "Sign out" })
   ] });
 };
 
 // src/hooks/useNotifications.ts
-import { useState as useState15, useEffect as useEffect9 } from "react";
-var useNotifications = (apiUrl = "http://localhost:5221") => {
+import { useState as useState15, useEffect as useEffect9, useMemo } from "react";
+var useNotifications = ({
+  apiUrl = "http://localhost:5221",
+  useMock = false,
+  mockData = []
+} = {}) => {
   const [notifications, setNotifications] = useState15([]);
   const [unreadCount, setUnreadCount] = useState15(0);
   const [loading, setLoading] = useState15(true);
+  const safeMockData = useMemo(() => mockData || [], [JSON.stringify(mockData)]);
+  const DEFAULT_MOCK_DATA = [
+    { id: "1", title: "Welcome", message: "Welcome to Primus UI", type: "info", timestamp: (/* @__PURE__ */ new Date()).toISOString(), read: false },
+    { id: "2", title: "System Update", message: "Maintenance scheduled", type: "warning", timestamp: (/* @__PURE__ */ new Date()).toISOString(), read: false },
+    { id: "3", title: "Payment Success", message: "Your payment was processed", type: "success", timestamp: (/* @__PURE__ */ new Date()).toISOString(), read: false }
+  ];
   useEffect9(() => {
+    if (useMock) {
+      const data = safeMockData.length > 0 ? safeMockData : DEFAULT_MOCK_DATA;
+      setNotifications(data);
+      setUnreadCount(data.filter((n) => !n.read).length);
+      setLoading(false);
+      return;
+    }
     fetchNotifications();
-    const interval = setInterval(fetchNotifications, 3e3);
+    const interval = setInterval(fetchNotifications, 1e4);
     return () => clearInterval(interval);
-  }, []);
+  }, [useMock, safeMockData]);
   const fetchNotifications = async () => {
+    if (useMock) return;
     try {
       const response = await fetch(`${apiUrl}/notifications`);
       if (response.ok) {
         const data = await response.json();
         setNotifications(data);
         setUnreadCount(data.filter((n) => !n.read).length);
+      } else {
+        throw new Error("API unavailable");
       }
     } catch (error) {
-      console.error("Failed to fetch notifications:", error);
+      console.warn("Failed to fetch notifications, using mock data:", error);
+      setNotifications((prev) => prev.length === 0 ? DEFAULT_MOCK_DATA : prev);
+      setUnreadCount((prev) => notifications.length === 0 ? DEFAULT_MOCK_DATA.filter((n) => !n.read).length : prev);
     } finally {
       setLoading(false);
     }
@@ -1209,7 +1325,7 @@ var useNotifications = (apiUrl = "http://localhost:5221") => {
 import { BellIcon, CheckCircleIcon, ExclamationTriangleIcon, InformationCircleIcon, XCircleIcon } from "@heroicons/react/24/outline";
 import { Popover, Transition } from "@headlessui/react";
 import { Fragment as Fragment2 } from "react";
-import { clsx as clsx2 } from "clsx";
+import { clsx } from "clsx";
 import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 var NotificationIcon = ({ type }) => {
   switch (type) {
@@ -1223,10 +1339,10 @@ var NotificationIcon = ({ type }) => {
       return /* @__PURE__ */ jsx17(InformationCircleIcon, { className: "h-6 w-6 text-blue-500" });
   }
 };
-var NotificationFeed = () => {
-  const { notifications, unreadCount, markAsRead, markAllAsRead } = useNotifications();
-  return /* @__PURE__ */ jsx17(Popover, { className: "relative", children: ({ open }) => /* @__PURE__ */ jsxs14(Fragment3, { children: [
-    /* @__PURE__ */ jsxs14(Popover.Button, { className: clsx2(
+var PrimusNotificationFeed = ({ useMock, mockData, apiUrl, className }) => {
+  const { notifications, unreadCount, markAsRead, markAllAsRead } = useNotifications({ useMock, mockData, apiUrl });
+  return /* @__PURE__ */ jsx17(Popover, { className: clsx("relative", className), children: ({ open }) => /* @__PURE__ */ jsxs14(Fragment3, { children: [
+    /* @__PURE__ */ jsxs14(Popover.Button, { className: clsx(
       "relative p-2 rounded-full hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primus-500",
       open && "bg-gray-100"
     ), children: [
@@ -1258,7 +1374,7 @@ var NotificationFeed = () => {
           /* @__PURE__ */ jsx17("div", { className: "max-h-96 overflow-y-auto", children: notifications.length === 0 ? /* @__PURE__ */ jsx17("div", { className: "px-4 py-6 text-center text-sm text-gray-500", children: "No new notifications" }) : /* @__PURE__ */ jsx17("div", { className: "divide-y divide-gray-100", children: notifications.map((notification) => /* @__PURE__ */ jsxs14(
             "div",
             {
-              className: clsx2(
+              className: clsx(
                 "flex gap-3 px-4 py-4 hover:bg-gray-50 transition-colors cursor-pointer",
                 !notification.read && "bg-blue-50/50"
               ),
@@ -1287,7 +1403,13 @@ import { useState as useState16, useEffect as useEffect10, useCallback as useCal
 import { Bell, Send, X, Check, AlertTriangle, Info, AlertCircle } from "lucide-react";
 import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var API_URL = "http://localhost:5222";
-function PrimusNotificationCenter({ theme: themeOverride, apiUrl = API_URL }) {
+function PrimusNotificationCenter({
+  theme: themeOverride,
+  apiUrl = API_URL,
+  pollInterval = 3e3,
+  useMock = false,
+  mockData
+}) {
   const themeContext = usePrimusTheme();
   const theme = themeOverride || themeContext.theme;
   const t = themeColors[theme];
@@ -1311,13 +1433,37 @@ function PrimusNotificationCenter({ theme: themeOverride, apiUrl = API_URL }) {
     }
   }, [apiUrl]);
   useEffect10(() => {
+    if (useMock || mockData) {
+      const next = mockData ?? [];
+      setNotifications(next);
+      setUnreadCount(next.filter((n) => !n.read).length);
+      return;
+    }
     fetchNotifications();
-    const interval = setInterval(fetchNotifications, 3e3);
+    const interval = setInterval(fetchNotifications, pollInterval);
     return () => clearInterval(interval);
-  }, [fetchNotifications]);
+  }, [fetchNotifications, pollInterval, useMock, mockData]);
   const sendNotification = async () => {
     if (!newTitle.trim() || !newMessage.trim()) return;
     setSending(true);
+    if (useMock || mockData) {
+      const next = {
+        id: `mock-${Date.now()}`,
+        title: newTitle,
+        message: newMessage,
+        type: newType,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        read: false
+      };
+      setNotifications((prev) => [next, ...prev]);
+      setUnreadCount((prev) => prev + 1);
+      setNewTitle("");
+      setNewMessage("");
+      setNewType("info");
+      setShowSendForm(false);
+      setSending(false);
+      return;
+    }
     try {
       const response = await fetch(`${apiUrl}/api/notifications`, {
         method: "POST",
@@ -1337,8 +1483,13 @@ function PrimusNotificationCenter({ theme: themeOverride, apiUrl = API_URL }) {
     setSending(false);
   };
   const markAsRead = async (id) => {
+    if (useMock || mockData) {
+      setNotifications((prev) => prev.map((n) => n.id === id ? { ...n, read: true } : n));
+      setUnreadCount((prev) => Math.max(0, prev - 1));
+      return;
+    }
     try {
-      await fetch(`${apiUrl}/api/notifications/${id}/read`, { method: "PUT" });
+      await fetch(`${apiUrl}/api/notifications/${id}/read`, { method: "POST" });
       setNotifications((prev) => prev.map((n) => n.id === id ? { ...n, read: true } : n));
       setUnreadCount((prev) => Math.max(0, prev - 1));
     } catch {
@@ -1578,32 +1729,81 @@ import { useState as useState18 } from "react";
 
 // src/components/shared/Input.tsx
 import React14 from "react";
-import { clsx as clsx3 } from "clsx";
-import { twMerge as twMerge2 } from "tailwind-merge";
+import { clsx as clsx2 } from "clsx";
+import { XMarkIcon } from "@heroicons/react/20/solid";
 import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
-function cn2(...inputs) {
-  return twMerge2(clsx3(inputs));
-}
+var sizeClasses = {
+  sm: "h-8 text-xs",
+  md: "h-10 text-sm",
+  lg: "h-12 text-base"
+};
+var iconSizeClasses = {
+  sm: "w-4 h-4 [&>*]:w-full [&>*]:h-full",
+  md: "w-5 h-5 [&>*]:w-full [&>*]:h-full",
+  lg: "w-6 h-6 [&>*]:w-full [&>*]:h-full"
+};
 var Input = React14.forwardRef(
-  ({ className, label, error, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs16("div", { className: "w-full", children: [
-      label && /* @__PURE__ */ jsx19("label", { className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2 block text-gray-700", children: label }),
-      /* @__PURE__ */ jsx19(
-        "input",
-        {
-          ref,
-          className: cn2(
-            "flex h-10 w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-            error && "border-red-500 focus-visible:ring-red-500",
-            className
-          ),
-          ...props
-        }
-      ),
-      error && /* @__PURE__ */ jsx19("p", { className: "text-sm text-red-500 mt-1", children: error })
+  ({ className, style, label, error, disabled, startIcon, endIcon, onClear, value, onChange, size = "md", loading = false, ...props }, ref) => {
+    const hasValue = value !== void 0 && value !== "" && value !== null;
+    return /* @__PURE__ */ jsxs16("div", { className: clsx2("w-full", className), style, children: [
+      label && /* @__PURE__ */ jsx19("label", { className: clsx2(
+        "block font-medium mb-1.5",
+        size === "sm" ? "text-xs" : "text-sm",
+        disabled ? "text-gray-400 opacity-70" : "text-gray-700"
+      ), children: label }),
+      /* @__PURE__ */ jsxs16("div", { className: clsx2(
+        "relative flex items-center w-full rounded-lg transition-all duration-200 ease-in-out bg-white overflow-hidden",
+        "border",
+        error ? "border-red-500 hover:border-red-600 focus-within:ring-2 focus-within:ring-red-500/20 focus-within:border-red-500" : "border-gray-200 hover:border-gray-300 focus-within:ring-2 focus-within:ring-primus-500/20 focus-within:border-primus-500",
+        disabled && "bg-gray-50 opacity-60 cursor-not-allowed"
+      ), children: [
+        startIcon && /* @__PURE__ */ jsx19("div", { className: clsx2(
+          "flex-shrink-0 pl-3 pr-2 text-gray-400 select-none pointer-events-none flex items-center justify-center",
+          iconSizeClasses[size]
+        ), children: startIcon }),
+        /* @__PURE__ */ jsx19(
+          "input",
+          {
+            ref,
+            disabled,
+            value,
+            onChange,
+            className: clsx2(
+              "flex-1 w-full border-none bg-transparent p-0 placeholder:text-gray-400 focus:ring-0 outline-none",
+              sizeClasses[size],
+              // Adjust padding based on icon presence
+              !startIcon && "pl-3",
+              !endIcon && !onClear && !loading && "pr-3"
+            ),
+            ...props
+          }
+        ),
+        onClear && hasValue && !disabled && !loading && /* @__PURE__ */ jsx19("div", { className: "flex-shrink-0 pr-2 flex items-center justify-center", children: /* @__PURE__ */ jsx19(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onClear();
+            },
+            className: "p-1 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors",
+            children: /* @__PURE__ */ jsx19(XMarkIcon, { className: "h-4 w-4" })
+          }
+        ) }),
+        loading && /* @__PURE__ */ jsx19("div", { className: "flex-shrink-0 pr-3 pl-2 flex items-center justify-center", children: /* @__PURE__ */ jsxs16("svg", { className: "animate-spin h-5 w-5 text-primus-500", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ jsx19("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+          /* @__PURE__ */ jsx19("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+        ] }) }),
+        endIcon && !loading && (onClear ? !hasValue : true) && /* @__PURE__ */ jsx19("div", { className: clsx2(
+          "flex-shrink-0 pr-3 pl-2 text-gray-400 select-none pointer-events-none flex items-center justify-center",
+          iconSizeClasses[size]
+        ), children: endIcon })
+      ] }),
+      error && /* @__PURE__ */ jsx19("p", { className: "mt-1.5 text-xs text-red-500 flex items-center gap-1 animate-in slide-in-from-top-1 fade-in duration-200", children: error })
     ] });
   }
 );
+Input.displayName = "Input";
 
 // src/components/payments/CheckoutForm.tsx
 import { LockClosedIcon, CheckCircleIcon as CheckCircleIcon2, XCircleIcon as XCircleIcon2 } from "@heroicons/react/24/solid";
@@ -1749,22 +1949,22 @@ var CheckoutForm = ({
 import {
   DocumentArrowDownIcon,
   PrinterIcon,
-  XMarkIcon
+  XMarkIcon as XMarkIcon2
 } from "@heroicons/react/24/outline";
 import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 var DocumentViewer = ({
-  document,
+  document: document2,
   onClose,
   onDownload
 }) => {
   const renderContent = () => {
-    switch (document.type) {
+    switch (document2.type) {
       case "image":
         return /* @__PURE__ */ jsx21(
           "img",
           {
-            src: document.url,
-            alt: document.name,
+            src: document2.url,
+            alt: document2.name,
             className: "max-w-full max-h-[80vh] object-contain mx-auto shadow-lg rounded"
           }
         );
@@ -1772,14 +1972,14 @@ var DocumentViewer = ({
         return /* @__PURE__ */ jsx21("div", { className: "bg-gray-100 p-8 rounded-lg text-center h-[600px] flex items-center justify-center border-2 border-dashed border-gray-300", children: /* @__PURE__ */ jsxs18("div", { className: "text-gray-500", children: [
           /* @__PURE__ */ jsx21(DocumentArrowDownIcon, { className: "h-16 w-16 mx-auto mb-4 text-gray-400" }),
           /* @__PURE__ */ jsx21("p", { className: "font-medium", children: "PDF Preview" }),
-          /* @__PURE__ */ jsx21("p", { className: "text-sm mt-2", children: document.name }),
+          /* @__PURE__ */ jsx21("p", { className: "text-sm mt-2", children: document2.name }),
           /* @__PURE__ */ jsx21(Button, { variant: "outline", size: "sm", className: "mt-4", onClick: onDownload, children: "Download to view" })
         ] }) });
       default:
         return /* @__PURE__ */ jsxs18("div", { className: "bg-white p-8 rounded shadow border border-gray-200 h-[600px] overflow-auto font-mono text-sm leading-relaxed", children: [
           /* @__PURE__ */ jsxs18("p", { children: [
             "Document Content: ",
-            document.name
+            document2.name
           ] }),
           /* @__PURE__ */ jsx21("p", { className: "mt-4 text-gray-500", children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." })
         ] });
@@ -1788,13 +1988,13 @@ var DocumentViewer = ({
   return /* @__PURE__ */ jsxs18("div", { className: "flex flex-col h-full bg-gray-50 rounded-lg overflow-hidden border border-gray-200", children: [
     /* @__PURE__ */ jsxs18("div", { className: "bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between shadow-sm", children: [
       /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx21("div", { className: "h-8 w-8 bg-primus-100 rounded flex items-center justify-center text-primus-700", children: /* @__PURE__ */ jsx21("span", { className: "uppercase text-xs font-bold", children: document.type }) }),
+        /* @__PURE__ */ jsx21("div", { className: "h-8 w-8 bg-primus-100 rounded flex items-center justify-center text-primus-700", children: /* @__PURE__ */ jsx21("span", { className: "uppercase text-xs font-bold", children: document2.type }) }),
         /* @__PURE__ */ jsxs18("div", { children: [
-          /* @__PURE__ */ jsx21("h3", { className: "text-sm font-semibold text-gray-900", children: document.name }),
-          document.size && /* @__PURE__ */ jsxs18("p", { className: "text-xs text-gray-500", children: [
-            document.size,
+          /* @__PURE__ */ jsx21("h3", { className: "text-sm font-semibold text-gray-900", children: document2.name }),
+          document2.size && /* @__PURE__ */ jsxs18("p", { className: "text-xs text-gray-500", children: [
+            document2.size,
             " \u2022 ",
-            document.date
+            document2.date
           ] })
         ] })
       ] }),
@@ -1802,7 +2002,7 @@ var DocumentViewer = ({
         /* @__PURE__ */ jsx21(Button, { variant: "ghost", size: "sm", onClick: () => window.print(), children: /* @__PURE__ */ jsx21(PrinterIcon, { className: "h-4 w-4" }) }),
         /* @__PURE__ */ jsx21(Button, { variant: "ghost", size: "sm", onClick: onDownload, children: /* @__PURE__ */ jsx21(DocumentArrowDownIcon, { className: "h-4 w-4" }) }),
         onClose && /* @__PURE__ */ jsx21("div", { className: "h-6 w-px bg-gray-200 mx-1" }),
-        onClose && /* @__PURE__ */ jsx21(Button, { variant: "ghost", size: "sm", onClick: onClose, className: "text-gray-400 hover:text-red-500", children: /* @__PURE__ */ jsx21(XMarkIcon, { className: "h-5 w-5" }) })
+        onClose && /* @__PURE__ */ jsx21(Button, { variant: "ghost", size: "sm", onClick: onClose, className: "text-gray-400 hover:text-red-500", children: /* @__PURE__ */ jsx21(XMarkIcon2, { className: "h-5 w-5" }) })
       ] })
     ] }),
     /* @__PURE__ */ jsx21("div", { className: "flex-1 overflow-auto p-6 flex flex-col items-center justify-center", children: renderContent() })
@@ -1810,7 +2010,7 @@ var DocumentViewer = ({
 };
 
 // src/components/banking/cards/CreditCardVisual.tsx
-import { clsx as clsx4 } from "clsx";
+import { clsx as clsx3 } from "clsx";
 import { WifiIcon } from "@heroicons/react/24/outline";
 import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 var CreditCardVisual = ({
@@ -1832,7 +2032,7 @@ var CreditCardVisual = ({
         return "bg-gradient-to-br from-gray-900 to-gray-800";
     }
   };
-  return /* @__PURE__ */ jsxs19("div", { className: clsx4(
+  return /* @__PURE__ */ jsxs19("div", { className: clsx3(
     "w-80 h-48 rounded-2xl p-6 text-white shadow-xl relative overflow-hidden transition-transform hover:scale-105 duration-300",
     getBackground()
   ), children: [
@@ -1866,7 +2066,7 @@ import {
   ArrowUpRightIcon,
   ShoppingBagIcon
 } from "@heroicons/react/24/outline";
-import { clsx as clsx5 } from "clsx";
+import { clsx as clsx4 } from "clsx";
 import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
 var TransactionHistory = ({
   transactions,
@@ -1889,7 +2089,7 @@ var TransactionHistory = ({
         className: "px-6 py-4 flex items-center justify-between hover:bg-gray-50 cursor-pointer transition-colors",
         children: [
           /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ jsx23("div", { className: clsx5(
+            /* @__PURE__ */ jsx23("div", { className: clsx4(
               "h-10 w-10 rounded-full flex items-center justify-center",
               t.type === "credit" ? "bg-green-100" : "bg-gray-100"
             ), children: getIcon(t) }),
@@ -1899,7 +2099,7 @@ var TransactionHistory = ({
             ] })
           ] }),
           /* @__PURE__ */ jsxs20("div", { className: "text-right", children: [
-            /* @__PURE__ */ jsxs20("p", { className: clsx5(
+            /* @__PURE__ */ jsxs20("p", { className: clsx4(
               "text-sm font-semibold",
               t.type === "credit" ? "text-green-600" : "text-gray-900"
             ), children: [
@@ -1916,7 +2116,7 @@ var TransactionHistory = ({
 };
 
 // src/components/insurance/policies/PolicyCard.tsx
-import { clsx as clsx6 } from "clsx";
+import { clsx as clsx5 } from "clsx";
 import { ShieldCheckIcon, DocumentTextIcon } from "@heroicons/react/24/outline";
 import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 var PolicyCard = ({
@@ -1936,7 +2136,7 @@ var PolicyCard = ({
           " Insurance"
         ] })
       ] }),
-      /* @__PURE__ */ jsx24("span", { className: clsx6(
+      /* @__PURE__ */ jsx24("span", { className: clsx5(
         "px-2.5 py-0.5 rounded-full text-xs font-medium uppercase tracking-wide",
         status === "active" ? "bg-green-100 text-green-800" : status === "pending" ? "bg-yellow-100 text-yellow-800" : "bg-gray-100 text-gray-800"
       ), children: status })
@@ -1975,7 +2175,7 @@ var PolicyCard = ({
 };
 
 // src/components/insurance/claims/ClaimStatusTracker.tsx
-import { clsx as clsx7 } from "clsx";
+import { clsx as clsx6 } from "clsx";
 import { CheckIcon } from "@heroicons/react/24/solid";
 import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
 var ClaimStatusTracker = ({
@@ -1990,14 +2190,14 @@ var ClaimStatusTracker = ({
         claimId
       ] })
     ] }),
-    /* @__PURE__ */ jsx25("nav", { "aria-label": "Progress", children: /* @__PURE__ */ jsx25("ol", { role: "list", className: "overflow-hidden", children: steps.map((step, stepIdx) => /* @__PURE__ */ jsxs22("li", { className: clsx7(
+    /* @__PURE__ */ jsx25("nav", { "aria-label": "Progress", children: /* @__PURE__ */ jsx25("ol", { role: "list", className: "overflow-hidden", children: steps.map((step, stepIdx) => /* @__PURE__ */ jsxs22("li", { className: clsx6(
       "relative pb-10",
       stepIdx === steps.length - 1 ? "pb-0" : ""
     ), children: [
       stepIdx !== steps.length - 1 ? /* @__PURE__ */ jsx25(
         "div",
         {
-          className: clsx7(
+          className: clsx6(
             "absolute top-4 left-4 -ml-px h-full w-0.5",
             step.status === "completed" ? "bg-primus-600" : "bg-gray-200"
           ),
@@ -2005,12 +2205,12 @@ var ClaimStatusTracker = ({
         }
       ) : null,
       /* @__PURE__ */ jsxs22("div", { className: "relative flex items-start group", children: [
-        /* @__PURE__ */ jsx25("span", { className: "h-9 flex items-center", children: /* @__PURE__ */ jsx25("span", { className: clsx7(
+        /* @__PURE__ */ jsx25("span", { className: "h-9 flex items-center", children: /* @__PURE__ */ jsx25("span", { className: clsx6(
           "relative z-10 w-8 h-8 flex items-center justify-center rounded-full ring-1 ring-white",
           step.status === "completed" ? "bg-primus-600" : step.status === "current" ? "bg-white border-2 border-primus-600" : "bg-white border-2 border-gray-300"
         ), children: step.status === "completed" ? /* @__PURE__ */ jsx25(CheckIcon, { className: "w-5 h-5 text-white", "aria-hidden": "true" }) : step.status === "current" ? /* @__PURE__ */ jsx25("span", { className: "h-2.5 w-2.5 bg-primus-600 rounded-full" }) : null }) }),
         /* @__PURE__ */ jsxs22("span", { className: "ml-4 min-w-0 flex flex-col", children: [
-          /* @__PURE__ */ jsx25("span", { className: clsx7(
+          /* @__PURE__ */ jsx25("span", { className: clsx6(
             "text-sm font-medium",
             step.status === "upcoming" ? "text-gray-500" : "text-gray-900"
           ), children: step.label }),
@@ -2166,9 +2366,14 @@ var PrimusSidebar = ({
     logo && /* @__PURE__ */ jsx29("div", { className: "h-20 flex items-center px-6 relative z-10 border-b border-white/5", children: logo }),
     /* @__PURE__ */ jsx29("nav", { className: "flex-1 py-6 px-3 overflow-y-auto relative z-10", children: /* @__PURE__ */ jsx29("ul", { className: "space-y-1", children: items.map((item) => {
       const isActive = activeId === item.id || item.active;
+      const link = item.href ?? item.route;
+      const Wrapper = link ? "a" : "button";
       return /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsxs26(
-        "button",
+        Wrapper,
         {
+          href: link,
+          target: item.target,
+          rel: item.target === "_blank" ? "noreferrer" : void 0,
           onClick: () => {
             item.onClick?.();
             onItemClick?.(item);
@@ -2227,7 +2432,7 @@ var PrimusHeader = ({
 };
 
 // src/components/crud/PrimusDataTable.tsx
-import { useState as useState21, useMemo } from "react";
+import { useState as useState21, useMemo as useMemo2 } from "react";
 import { jsx as jsx31, jsxs as jsxs28 } from "react/jsx-runtime";
 function PrimusDataTable({
   data,
@@ -2241,12 +2446,17 @@ function PrimusDataTable({
   actions,
   emptyMessage = "No data available",
   searchPlaceholder = "Filter...",
-  searchable = true
+  searchable = true,
+  paginated = false,
+  pageSize = 10,
+  pageIndex,
+  onPageChange
 }) {
   const [search, setSearch] = useState21("");
   const [sortKey, setSortKey] = useState21(null);
   const [sortDir, setSortDir] = useState21("asc");
-  const filteredData = useMemo(() => {
+  const [internalPageIndex, setInternalPageIndex] = useState21(0);
+  const filteredData = useMemo2(() => {
     let result = [...data];
     if (search) {
       const lowerSearch = search.toLowerCase();
@@ -2273,16 +2483,33 @@ function PrimusDataTable({
       setSortKey(key);
       setSortDir("asc");
     }
+    if (paginated) {
+      goToPage(0);
+    }
+  };
+  const effectivePageIndex = pageIndex ?? internalPageIndex;
+  const totalPages = Math.max(1, Math.ceil(filteredData.length / Math.max(pageSize, 1)));
+  const currentPageIndex = Math.min(Math.max(effectivePageIndex, 0), totalPages - 1);
+  const pageData = paginated ? filteredData.slice(currentPageIndex * pageSize, currentPageIndex * pageSize + pageSize) : filteredData;
+  const selectionScope = paginated ? pageData : filteredData;
+  const isScopeSelected = selectionScope.length > 0 && selectionScope.every((row) => selectedKeys.includes(row[rowKey]));
+  const goToPage = (nextIndex) => {
+    const clamped = Math.min(Math.max(nextIndex, 0), totalPages - 1);
+    if (pageIndex === void 0) {
+      setInternalPageIndex(clamped);
+    }
+    onPageChange?.({ pageIndex: clamped, pageSize });
   };
   const toggleSelect = (key) => {
     const newKeys = selectedKeys.includes(key) ? selectedKeys.filter((k) => k !== key) : [...selectedKeys, key];
     onSelectionChange?.(newKeys);
   };
   const toggleSelectAll = () => {
-    if (selectedKeys.length === filteredData.length) {
+    const scopeKeys = selectionScope.map((row) => row[rowKey]);
+    if (isScopeSelected) {
       onSelectionChange?.([]);
     } else {
-      onSelectionChange?.(filteredData.map((row) => row[rowKey]));
+      onSelectionChange?.(scopeKeys);
     }
   };
   return /* @__PURE__ */ jsxs28("div", { className: "flex flex-col space-y-4", children: [
@@ -2294,7 +2521,12 @@ function PrimusDataTable({
           type: "text",
           placeholder: searchPlaceholder,
           value: search,
-          onChange: (e) => setSearch(e.target.value),
+          onChange: (e) => {
+            setSearch(e.target.value);
+            if (paginated) {
+              goToPage(0);
+            }
+          },
           className: "w-64 pl-10 pr-4 py-2 bg-white/5 border border-white/10 rounded-lg text-sm text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-purple-500/50 focus:bg-white/10 transition-all hover:bg-white/10"
         }
       )
@@ -2305,7 +2537,7 @@ function PrimusDataTable({
           "input",
           {
             type: "checkbox",
-            checked: selectedKeys.length === filteredData.length && filteredData.length > 0,
+            checked: isScopeSelected,
             onChange: toggleSelectAll,
             className: "rounded border-gray-600 bg-gray-800 text-purple-600 focus:ring-offset-gray-900 focus:ring-purple-500 transition-colors cursor-pointer"
           }
@@ -2328,7 +2560,7 @@ function PrimusDataTable({
       /* @__PURE__ */ jsx31("tbody", { className: "divide-y divide-white/5", children: loading ? /* @__PURE__ */ jsx31("tr", { children: /* @__PURE__ */ jsx31("td", { colSpan: columns.length + (selectable ? 1 : 0) + (actions ? 1 : 0), className: "px-6 py-24 text-center text-gray-500", children: /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-center justify-center gap-3", children: [
         /* @__PURE__ */ jsx31("div", { className: "w-6 h-6 border-2 border-purple-500/50 border-t-purple-500 rounded-full animate-spin" }),
         /* @__PURE__ */ jsx31("span", { className: "text-sm font-medium", children: "Loading data..." })
-      ] }) }) }) : filteredData.length === 0 ? /* @__PURE__ */ jsx31("tr", { children: /* @__PURE__ */ jsx31("td", { colSpan: columns.length + (selectable ? 1 : 0) + (actions ? 1 : 0), className: "px-6 py-24 text-center text-gray-500", children: /* @__PURE__ */ jsx31("p", { className: "text-sm", children: emptyMessage }) }) }) : filteredData.map((row) => /* @__PURE__ */ jsxs28(
+      ] }) }) }) : filteredData.length === 0 ? /* @__PURE__ */ jsx31("tr", { children: /* @__PURE__ */ jsx31("td", { colSpan: columns.length + (selectable ? 1 : 0) + (actions ? 1 : 0), className: "px-6 py-24 text-center text-gray-500", children: /* @__PURE__ */ jsx31("p", { className: "text-sm", children: emptyMessage }) }) }) : pageData.map((row) => /* @__PURE__ */ jsxs28(
         "tr",
         {
           onClick: () => onRowClick?.(row),
@@ -2353,7 +2585,35 @@ function PrimusDataTable({
         },
         String(row[rowKey])
       )) })
-    ] }) }) })
+    ] }) }) }),
+    paginated && totalPages > 1 && /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-between text-sm text-gray-400 px-2", children: [
+      /* @__PURE__ */ jsx31(
+        "button",
+        {
+          type: "button",
+          onClick: () => goToPage(currentPageIndex - 1),
+          disabled: currentPageIndex === 0,
+          className: "px-3 py-2 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 disabled:opacity-50 disabled:cursor-not-allowed",
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsxs28("span", { children: [
+        "Page ",
+        currentPageIndex + 1,
+        " of ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ jsx31(
+        "button",
+        {
+          type: "button",
+          onClick: () => goToPage(currentPageIndex + 1),
+          disabled: currentPageIndex >= totalPages - 1,
+          className: "px-3 py-2 rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 disabled:opacity-50 disabled:cursor-not-allowed",
+          children: "Next"
+        }
+      )
+    ] })
   ] });
 }
 
@@ -2368,7 +2628,7 @@ var PrimusModal = ({
   size = "md"
 }) => {
   if (!open) return null;
-  const sizeClasses = {
+  const sizeClasses2 = {
     sm: "max-w-sm",
     md: "max-w-md",
     lg: "max-w-lg",
@@ -2382,7 +2642,7 @@ var PrimusModal = ({
         onClick: onClose
       }
     ),
-    /* @__PURE__ */ jsxs29("div", { className: `relative w-full ${sizeClasses[size]} mx-4 bg-gray-800 rounded-xl border border-gray-700 shadow-2xl`, children: [
+    /* @__PURE__ */ jsxs29("div", { className: `relative w-full ${sizeClasses2[size]} mx-4 bg-gray-800 rounded-xl border border-gray-700 shadow-2xl`, children: [
       title && /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-700", children: [
         /* @__PURE__ */ jsx32("h2", { className: "text-lg font-semibold text-white", children: title }),
         /* @__PURE__ */ jsx32(
@@ -2422,12 +2682,28 @@ var PrimusStatCard = ({
     neutral: "\u2192"
   };
   const renderSparkline = () => {
-    return /* @__PURE__ */ jsxs30("svg", { className: "w-full h-12 opacity-50 absolute bottom-0 left-0", preserveAspectRatio: "none", "data-trend": trend.join(","), children: [
-      /* @__PURE__ */ jsx33("path", { d: "M0 40 Q 20 20 40 40 T 80 40 T 120 40 T 160 30 V 50 H 0 Z", fill: `url(#gradient-${title.replace(/\s/g, "")})`, stroke: "none" }),
-      /* @__PURE__ */ jsx33("defs", { children: /* @__PURE__ */ jsxs30("linearGradient", { id: `gradient-${title.replace(/\s/g, "")}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-        /* @__PURE__ */ jsx33("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "0.2" }),
+    if (!trend || trend.length === 0) {
+      return null;
+    }
+    const max = Math.max(...trend);
+    const min = Math.min(...trend);
+    const range = max - min || 1;
+    const divisor = trend.length > 1 ? trend.length - 1 : 1;
+    const points = trend.map((value2, index) => {
+      const x = index / divisor * 100;
+      const y = 100 - (value2 - min) / range * 100;
+      return { x, y };
+    });
+    const linePath = points.map((point, index) => `${index === 0 ? "M" : "L"} ${point.x} ${point.y}`).join(" ");
+    const areaPath = `${linePath} L 100 100 L 0 100 Z`;
+    const gradientId = `gradient-${title.replace(/\s/g, "")}`;
+    return /* @__PURE__ */ jsxs30("svg", { className: "w-full h-12 opacity-60 absolute bottom-0 left-0", viewBox: "0 0 100 100", preserveAspectRatio: "none", "data-trend": trend.join(","), children: [
+      /* @__PURE__ */ jsx33("defs", { children: /* @__PURE__ */ jsxs30("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ jsx33("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "0.25" }),
         /* @__PURE__ */ jsx33("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0" })
-      ] }) })
+      ] }) }),
+      /* @__PURE__ */ jsx33("path", { d: areaPath, fill: `url(#${gradientId})`, stroke: "none" }),
+      /* @__PURE__ */ jsx33("path", { d: linePath, fill: "none", stroke: "currentColor", strokeWidth: "1.8", opacity: "0.6" })
     ] });
   };
   return /* @__PURE__ */ jsxs30("div", { className: "relative overflow-hidden bg-slate-900/40 backdrop-blur-md rounded-2xl border border-white/5 hover:border-white/10 transition-all duration-300 group", children: [
@@ -2481,12 +2757,1425 @@ var DashboardGrid = ({
   };
   return /* @__PURE__ */ jsx33("div", { className: `grid gap-6 ${colClasses[columns]}`, children });
 };
+
+// src/components/dashboard/PrimusActivityFeed.tsx
+import { useMemo as useMemo3 } from "react";
+import { jsx as jsx34, jsxs as jsxs31 } from "react/jsx-runtime";
+var statusClasses = {
+  success: "bg-emerald-500/10 text-emerald-300 border-emerald-500/30",
+  warning: "bg-amber-500/10 text-amber-300 border-amber-500/30",
+  error: "bg-rose-500/10 text-rose-300 border-rose-500/30",
+  info: "bg-blue-500/10 text-blue-300 border-blue-500/30"
+};
+var PrimusActivityFeed = ({
+  items,
+  maxItems = 10,
+  showTimestamps = true,
+  groupByDate = false,
+  loading = false
+}) => {
+  const visibleItems = useMemo3(() => items.slice(0, maxItems), [items, maxItems]);
+  const groups = useMemo3(() => {
+    if (!groupByDate) {
+      return [{ label: "", items: visibleItems }];
+    }
+    const map = /* @__PURE__ */ new Map();
+    visibleItems.forEach((item) => {
+      const label = formatDate(item.timestamp);
+      const list = map.get(label) ?? [];
+      list.push(item);
+      map.set(label, list);
+    });
+    return Array.from(map.entries()).map(([label, groupItems]) => ({ label, items: groupItems }));
+  }, [groupByDate, visibleItems]);
+  if (loading) {
+    return /* @__PURE__ */ jsx34("div", { className: "rounded-xl border border-white/10 bg-slate-900/40 p-6 text-sm text-gray-400", children: "Loading activity..." });
+  }
+  return /* @__PURE__ */ jsx34("div", { className: "rounded-xl border border-white/10 bg-slate-900/40 p-6 space-y-6", children: groups.map((group, index) => /* @__PURE__ */ jsxs31("div", { children: [
+    group.label && /* @__PURE__ */ jsx34("div", { className: "text-xs uppercase tracking-wide text-gray-500 mb-3", children: group.label }),
+    /* @__PURE__ */ jsx34("div", { className: "space-y-4", children: group.items.map((item, itemIndex) => /* @__PURE__ */ jsxs31("div", { className: "flex items-start gap-4", children: [
+      /* @__PURE__ */ jsx34("div", { className: `mt-1 h-2.5 w-2.5 rounded-full border ${statusClasses[item.status ?? "info"]}` }),
+      /* @__PURE__ */ jsxs31("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsx34("div", { className: "text-sm font-medium text-gray-100", children: item.title }),
+          showTimestamps && /* @__PURE__ */ jsx34("div", { className: "text-xs text-gray-500", children: formatTime(item.timestamp) })
+        ] }),
+        item.description && /* @__PURE__ */ jsx34("div", { className: "text-xs text-gray-400 mt-1", children: item.description })
+      ] })
+    ] }, item.id ?? `${itemIndex}-${item.title}`)) })
+  ] }, `${group.label}-${index}`)) });
+};
+var formatDate = (value) => {
+  if (!value) {
+    return "";
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return String(value);
+  }
+  return date.toLocaleDateString();
+};
+var formatTime = (value) => {
+  if (!value) {
+    return "";
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return "";
+  }
+  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+};
+
+// src/components/charts/PrimusChartBase.tsx
+import { useEffect as useEffect14, useMemo as useMemo4, useRef } from "react";
+import {
+  Chart,
+  registerables
+} from "chart.js";
+import { jsx as jsx35 } from "react/jsx-runtime";
+var registered = false;
+var ensureRegistered = () => {
+  if (!registered) {
+    Chart.register(...registerables);
+    registered = true;
+  }
+};
+var PrimusChartBase = ({
+  type,
+  data,
+  labels = [],
+  series = [],
+  options,
+  responsive = true,
+  maintainAspectRatio = false,
+  legend = true,
+  height = 300,
+  width,
+  ariaLabel = "Chart",
+  className,
+  datasetTransform
+}) => {
+  const canvasRef = useRef(null);
+  const chartRef = useRef(null);
+  const builtData = useMemo4(() => {
+    if (data) {
+      return data;
+    }
+    const datasets = series.map((item) => {
+      const color = item.color ?? item.borderColor ?? "#3b82f6";
+      const background = item.backgroundColor ?? color;
+      let dataset = {
+        label: item.name,
+        data: item.data,
+        borderColor: item.borderColor ?? color,
+        backgroundColor: background,
+        fill: item.fill
+      };
+      if (datasetTransform) {
+        dataset = datasetTransform(dataset);
+      }
+      return dataset;
+    });
+    return {
+      labels,
+      datasets
+    };
+  }, [data, labels, series, datasetTransform]);
+  const builtOptions = useMemo4(() => {
+    const mergedPlugins = {
+      ...options?.plugins ?? {},
+      legend: {
+        display: legend,
+        ...options?.plugins?.legend ?? {}
+      }
+    };
+    return {
+      responsive,
+      maintainAspectRatio,
+      ...options ?? {},
+      plugins: mergedPlugins,
+      scales: {
+        ...options?.scales ?? {}
+      }
+    };
+  }, [options, responsive, maintainAspectRatio, legend]);
+  useEffect14(() => {
+    ensureRegistered();
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return void 0;
+    }
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return void 0;
+    }
+    if (chartRef.current) {
+      chartRef.current.destroy();
+      chartRef.current = null;
+    }
+    chartRef.current = new Chart(ctx, {
+      type,
+      data: builtData,
+      options: builtOptions
+    });
+    return () => {
+      chartRef.current?.destroy();
+      chartRef.current = null;
+    };
+  }, [type, builtData, builtOptions]);
+  return /* @__PURE__ */ jsx35("div", { className, style: { height, width }, children: /* @__PURE__ */ jsx35("canvas", { ref: canvasRef, "aria-label": ariaLabel, role: "img" }) });
+};
+
+// src/components/charts/PrimusLineChart.tsx
+import { jsx as jsx36 } from "react/jsx-runtime";
+var PrimusLineChart = (props) => {
+  return /* @__PURE__ */ jsx36(
+    PrimusChartBase,
+    {
+      ...props,
+      type: "line",
+      datasetTransform: (dataset) => ({
+        tension: 0.35,
+        pointRadius: 2,
+        pointHoverRadius: 4,
+        borderWidth: 2,
+        fill: dataset.fill ?? false,
+        ...dataset
+      })
+    }
+  );
+};
+
+// src/components/charts/PrimusAreaChart.tsx
+import { jsx as jsx37 } from "react/jsx-runtime";
+var PrimusAreaChart = (props) => {
+  return /* @__PURE__ */ jsx37(
+    PrimusChartBase,
+    {
+      ...props,
+      type: "line",
+      datasetTransform: (dataset) => ({
+        tension: 0.35,
+        pointRadius: 2,
+        pointHoverRadius: 4,
+        borderWidth: 2,
+        fill: dataset.fill ?? true,
+        ...dataset
+      })
+    }
+  );
+};
+
+// src/components/charts/PrimusBarChart.tsx
+import { jsx as jsx38 } from "react/jsx-runtime";
+var PrimusBarChart = ({ stacked = false, options, ...props }) => {
+  const mergedOptions = {
+    ...options,
+    scales: {
+      x: { stacked, ...options?.scales?.x ?? {} },
+      y: { stacked, ...options?.scales?.y ?? {} },
+      ...options?.scales ?? {}
+    }
+  };
+  return /* @__PURE__ */ jsx38(
+    PrimusChartBase,
+    {
+      ...props,
+      type: "bar",
+      options: mergedOptions,
+      datasetTransform: (dataset) => ({
+        borderRadius: 6,
+        borderSkipped: false,
+        ...dataset
+      })
+    }
+  );
+};
+
+// src/components/charts/PrimusPieChart.tsx
+import { jsx as jsx39 } from "react/jsx-runtime";
+var PrimusPieChart = ({ donut = false, cutout = "55%", options, ...props }) => {
+  const mergedOptions = {
+    ...options,
+    cutout: donut ? cutout : void 0
+  };
+  return /* @__PURE__ */ jsx39(
+    PrimusChartBase,
+    {
+      ...props,
+      type: donut ? "doughnut" : "pie",
+      options: mergedOptions,
+      datasetTransform: (dataset) => ({
+        borderWidth: 1,
+        borderColor: "transparent",
+        ...dataset
+      })
+    }
+  );
+};
+
+// src/components/charts/PrimusSparkline.tsx
+import { useMemo as useMemo5 } from "react";
+import { jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
+var PrimusSparkline = ({
+  series = [],
+  data,
+  type = "line",
+  height = 48,
+  width = 160,
+  strokeWidth = 2,
+  className,
+  ariaLabel = "Sparkline"
+}) => {
+  const values = data ?? series[0]?.data ?? [];
+  const color = series[0]?.color ?? series[0]?.borderColor ?? "#3b82f6";
+  const { linePath, areaPath } = useMemo5(() => {
+    if (!values.length) {
+      return { linePath: "", areaPath: "" };
+    }
+    const max = Math.max(...values);
+    const min = Math.min(...values);
+    const range = max - min || 1;
+    const divisor = values.length > 1 ? values.length - 1 : 1;
+    const points = values.map((value, index) => {
+      const x = index / divisor * 100;
+      const y = 100 - (value - min) / range * 100;
+      return { x, y };
+    });
+    const line = points.map((point, index) => `${index === 0 ? "M" : "L"} ${point.x} ${point.y}`).join(" ");
+    const area = `${line} L 100 100 L 0 100 Z`;
+    return { linePath: line, areaPath: area };
+  }, [values]);
+  if (!values.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs32(
+    "svg",
+    {
+      className,
+      width,
+      height,
+      viewBox: "0 0 100 100",
+      preserveAspectRatio: "none",
+      "aria-label": ariaLabel,
+      role: "img",
+      children: [
+        type === "area" && /* @__PURE__ */ jsx40("path", { d: areaPath, fill: color, opacity: 0.2, stroke: "none" }),
+        /* @__PURE__ */ jsx40("path", { d: linePath, fill: "none", stroke: color, strokeWidth })
+      ]
+    }
+  );
+};
+
+// src/components/shared/Checkbox.tsx
+import React22 from "react";
+import { jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
+var Checkbox = React22.forwardRef(
+  ({ style, label, error, disabled, className, ...props }, ref) => {
+    const containerStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "0.5rem"
+    };
+    const checkboxWrapperStyles = {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center"
+    };
+    const checkboxStyles = {
+      width: "1.25rem",
+      height: "1.25rem",
+      borderRadius: "0.25rem",
+      border: error ? "2px solid #ef4444" : "2px solid #e5e7eb",
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? 0.5 : 1,
+      accentColor: "#111827"
+    };
+    const labelStyles = {
+      fontSize: "0.875rem",
+      lineHeight: "1.25rem",
+      color: "#374151",
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? 0.7 : 1,
+      userSelect: "none"
+    };
+    const errorTextStyles = {
+      fontSize: "0.875rem",
+      lineHeight: "1.25rem",
+      color: "#ef4444",
+      marginTop: "0.25rem",
+      marginLeft: "1.75rem"
+    };
+    return /* @__PURE__ */ jsxs33("div", { children: [
+      /* @__PURE__ */ jsxs33("div", { style: containerStyles, children: [
+        /* @__PURE__ */ jsx41("div", { style: checkboxWrapperStyles, children: /* @__PURE__ */ jsx41(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            style: {
+              ...checkboxStyles,
+              ...style
+            },
+            disabled,
+            ...props
+          }
+        ) }),
+        label && /* @__PURE__ */ jsx41("label", { style: labelStyles, onClick: (e) => {
+          if (!disabled) {
+            const input = e.currentTarget.previousElementSibling?.querySelector("input");
+            input?.click();
+          }
+        }, children: label })
+      ] }),
+      error && /* @__PURE__ */ jsx41("p", { style: errorTextStyles, children: error })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/components/shared/RadioGroup.tsx
+import { jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
+var RadioGroup = ({
+  name,
+  options,
+  value,
+  onChange,
+  error,
+  disabled,
+  orientation = "vertical"
+}) => {
+  const containerStyles = {
+    display: "flex",
+    flexDirection: orientation === "vertical" ? "column" : "row",
+    gap: orientation === "vertical" ? "0.75rem" : "1.5rem"
+  };
+  const optionStyles = {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem"
+  };
+  const radioStyles = {
+    width: "1.25rem",
+    height: "1.25rem",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    accentColor: "#111827"
+  };
+  const labelStyles = {
+    fontSize: "0.875rem",
+    lineHeight: "1.25rem",
+    color: "#374151",
+    cursor: disabled ? "not-allowed" : "pointer",
+    userSelect: "none"
+  };
+  const errorTextStyles = {
+    fontSize: "0.875rem",
+    lineHeight: "1.25rem",
+    color: "#ef4444",
+    marginTop: "0.5rem"
+  };
+  return /* @__PURE__ */ jsxs34("div", { children: [
+    /* @__PURE__ */ jsx42("div", { style: containerStyles, children: options.map((option) => /* @__PURE__ */ jsxs34("div", { style: optionStyles, children: [
+      /* @__PURE__ */ jsx42(
+        "input",
+        {
+          type: "radio",
+          name,
+          value: option.value,
+          checked: value === option.value,
+          onChange: () => onChange?.(option.value),
+          disabled: disabled || option.disabled,
+          style: radioStyles
+        }
+      ),
+      /* @__PURE__ */ jsx42(
+        "label",
+        {
+          style: {
+            ...labelStyles,
+            opacity: disabled || option.disabled ? 0.5 : 1
+          },
+          onClick: () => {
+            if (!disabled && !option.disabled) {
+              onChange?.(option.value);
+            }
+          },
+          children: option.label
+        }
+      )
+    ] }, option.value)) }),
+    error && /* @__PURE__ */ jsx42("p", { style: errorTextStyles, children: error })
+  ] });
+};
+RadioGroup.displayName = "RadioGroup";
+
+// src/components/shared/Select.tsx
+import React23, { useState as useState22 } from "react";
+import { Combobox, Transition as Transition2 } from "@headlessui/react";
+import { CheckIcon as CheckIcon2, ChevronUpDownIcon, XMarkIcon as XMarkIcon3 } from "@heroicons/react/20/solid";
+import { clsx as clsx7 } from "clsx";
+import { Fragment as Fragment5, jsx as jsx43, jsxs as jsxs35 } from "react/jsx-runtime";
+var Select = ({
+  label,
+  error,
+  options,
+  placeholder = "Select option...",
+  value,
+  onChange,
+  multiple = false,
+  disabled = false,
+  className
+}) => {
+  const [query, setQuery] = useState22("");
+  const filteredOptions = query === "" ? options : options.filter(
+    (option) => option.label.toLowerCase().replace(/\s+/g, "").includes(query.toLowerCase().replace(/\s+/g, ""))
+  );
+  const getLabel = (val) => options.find((o) => o.value === val)?.label || val;
+  const removeChip = (valToRemove) => {
+    if (Array.isArray(value)) {
+      onChange?.(value.filter((v) => v !== valToRemove));
+    }
+  };
+  return /* @__PURE__ */ jsx43("div", { className: clsx7("w-full", className), children: /* @__PURE__ */ jsx43(
+    Combobox,
+    {
+      value,
+      onChange: (val) => {
+        onChange?.(val);
+      },
+      multiple,
+      disabled,
+      children: ({}) => /* @__PURE__ */ jsxs35("div", { className: "relative", children: [
+        label && /* @__PURE__ */ jsx43(Combobox.Label, { className: "block text-sm font-medium text-gray-700 mb-1", children: label }),
+        /* @__PURE__ */ jsxs35("div", { className: clsx7(
+          "relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left focus-within:ring-2 focus-within:ring-primus-500",
+          "border transition-all duration-200 ease-in-out",
+          error ? "border-red-500 focus-within:ring-red-500" : "border-gray-300",
+          disabled && "opacity-50 cursor-not-allowed bg-gray-50"
+        ), children: [
+          /* @__PURE__ */ jsxs35("div", { className: clsx7(
+            "flex flex-wrap items-center gap-1.5 w-full py-1.5 pl-3 pr-10 text-sm",
+            "min-h-[2.5rem]"
+          ), children: [
+            multiple && Array.isArray(value) && value.map((val) => /* @__PURE__ */ jsxs35("span", { className: "inline-flex items-center gap-1 rounded bg-primus-50 px-2 py-0.5 text-xs font-medium text-primus-700 ring-1 ring-inset ring-primus-700/10 max-w-[150px]", children: [
+              /* @__PURE__ */ jsx43("span", { className: "truncate", children: getLabel(val) }),
+              /* @__PURE__ */ jsxs35(
+                "button",
+                {
+                  type: "button",
+                  className: "group relative -mr-1 h-3.5 w-3.5 rounded-sm hover:bg-primus-600/20 flex-shrink-0 cursor-pointer",
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    removeChip(val);
+                  },
+                  onMouseDown: (e) => e.preventDefault(),
+                  children: [
+                    /* @__PURE__ */ jsx43("span", { className: "sr-only", children: "Remove" }),
+                    /* @__PURE__ */ jsx43(XMarkIcon3, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+                  ]
+                }
+              )
+            ] }, val)),
+            /* @__PURE__ */ jsx43(
+              Combobox.Input,
+              {
+                className: "border-none p-0 text-gray-900 focus:ring-0 outline-none placeholder:text-gray-400 bg-transparent min-w-[50px] flex-1 text-sm leading-5 py-0.5",
+                displayValue: (val) => !multiple && val ? getLabel(val) : query,
+                placeholder: multiple && Array.isArray(value) && value.length > 0 ? "" : placeholder,
+                onChange: (event) => setQuery(event.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx43(Combobox.Button, { className: "absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ jsx43(
+            ChevronUpDownIcon,
+            {
+              className: "h-5 w-5 text-gray-400",
+              "aria-hidden": "true"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx43(
+          Transition2,
+          {
+            as: React23.Fragment,
+            leave: "transition ease-in duration-100",
+            leaveFrom: "opacity-100",
+            leaveTo: "opacity-0",
+            afterLeave: () => setQuery(""),
+            children: /* @__PURE__ */ jsx43(Combobox.Options, { className: "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm", children: filteredOptions.length === 0 && query !== "" ? /* @__PURE__ */ jsx43("div", { className: "relative cursor-default select-none py-2 px-4 text-gray-700", children: "Nothing found." }) : filteredOptions.map((option) => /* @__PURE__ */ jsx43(
+              Combobox.Option,
+              {
+                className: ({ active }) => clsx7(
+                  "relative cursor-default select-none py-2 pl-10 pr-4",
+                  active ? "bg-primus-600 text-white" : "text-gray-900"
+                ),
+                value: option.value,
+                disabled: option.disabled,
+                children: ({ selected, active }) => /* @__PURE__ */ jsxs35(Fragment5, { children: [
+                  /* @__PURE__ */ jsx43("span", { className: clsx7("block truncate", selected ? "font-medium" : "font-normal"), children: option.label }),
+                  selected ? /* @__PURE__ */ jsx43(
+                    "span",
+                    {
+                      className: clsx7(
+                        "absolute inset-y-0 left-0 flex items-center pl-3",
+                        active ? "text-white" : "text-primus-600"
+                      ),
+                      children: /* @__PURE__ */ jsx43(CheckIcon2, { className: "h-5 w-5", "aria-hidden": "true" })
+                    }
+                  ) : null
+                ] })
+              },
+              option.value
+            )) })
+          }
+        ),
+        error && /* @__PURE__ */ jsx43("p", { className: "mt-1 text-sm text-red-500", children: error })
+      ] })
+    }
+  ) });
+};
+
+// src/components/shared/Toggle.tsx
+import React24 from "react";
+import { jsx as jsx44, jsxs as jsxs36 } from "react/jsx-runtime";
+var Toggle = ({
+  checked = false,
+  onChange,
+  disabled = false,
+  label,
+  size = "md"
+}) => {
+  const [isHovered, setIsHovered] = React24.useState(false);
+  const sizes = {
+    sm: { width: "2.25rem", height: "1.25rem", thumbSize: "0.875rem" },
+    md: { width: "2.75rem", height: "1.5rem", thumbSize: "1.125rem" },
+    lg: { width: "3.5rem", height: "2rem", thumbSize: "1.625rem" }
+  };
+  const currentSize = sizes[size];
+  const containerStyles = {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.75rem"
+  };
+  const switchStyles = {
+    position: "relative",
+    display: "inline-block",
+    width: currentSize.width,
+    height: currentSize.height,
+    backgroundColor: checked ? "#111827" : "#e5e7eb",
+    borderRadius: "9999px",
+    cursor: disabled ? "not-allowed" : "pointer",
+    transition: "background-color 0.2s ease",
+    opacity: disabled ? 0.5 : isHovered ? 0.9 : 1
+  };
+  const thumbStyles = {
+    position: "absolute",
+    top: "50%",
+    left: checked ? `calc(100% - ${currentSize.thumbSize} - 0.125rem)` : "0.125rem",
+    transform: "translateY(-50%)",
+    width: currentSize.thumbSize,
+    height: currentSize.thumbSize,
+    backgroundColor: "#ffffff",
+    borderRadius: "50%",
+    transition: "left 0.2s ease",
+    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)"
+  };
+  const labelStyles = {
+    fontSize: "0.875rem",
+    lineHeight: "1.25rem",
+    color: "#374151",
+    cursor: disabled ? "not-allowed" : "pointer",
+    userSelect: "none"
+  };
+  const handleClick = () => {
+    if (!disabled) {
+      onChange?.(!checked);
+    }
+  };
+  return /* @__PURE__ */ jsxs36("div", { style: containerStyles, children: [
+    /* @__PURE__ */ jsx44(
+      "div",
+      {
+        style: switchStyles,
+        onClick: handleClick,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        role: "switch",
+        "aria-checked": checked,
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: (e) => {
+          if (e.key === " " || e.key === "Enter") {
+            e.preventDefault();
+            handleClick();
+          }
+        },
+        children: /* @__PURE__ */ jsx44("div", { style: thumbStyles })
+      }
+    ),
+    label && /* @__PURE__ */ jsx44("label", { style: labelStyles, onClick: handleClick, children: label })
+  ] });
+};
+Toggle.displayName = "Toggle";
+
+// src/components/shared/Textarea.tsx
+import React25 from "react";
+import { jsx as jsx45, jsxs as jsxs37 } from "react/jsx-runtime";
+var Textarea = React25.forwardRef(
+  ({ style, label, error, disabled, resize = "vertical", ...props }, ref) => {
+    const [isFocused, setIsFocused] = React25.useState(false);
+    const containerStyles = {
+      width: "100%"
+    };
+    const labelStyles = {
+      fontSize: "0.875rem",
+      lineHeight: "1.25rem",
+      fontWeight: "500",
+      marginBottom: "0.5rem",
+      display: "block",
+      color: "#374151",
+      cursor: disabled ? "not-allowed" : "default",
+      opacity: disabled ? 0.7 : 1
+    };
+    const textareaStyles = {
+      display: "flex",
+      minHeight: "5rem",
+      width: "100%",
+      borderRadius: "0.375rem",
+      border: error ? "1px solid #ef4444" : "1px solid #e5e7eb",
+      backgroundColor: "#ffffff",
+      padding: "0.5rem 0.75rem",
+      fontSize: "0.875rem",
+      lineHeight: "1.5rem",
+      outline: "none",
+      transition: "all 0.2s ease",
+      cursor: disabled ? "not-allowed" : "text",
+      opacity: disabled ? 0.5 : 1,
+      resize,
+      fontFamily: "inherit",
+      boxShadow: isFocused ? error ? "0 0 0 2px rgba(239, 68, 68, 0.2)" : "0 0 0 2px rgba(3, 7, 18, 0.1)" : "none"
+    };
+    const errorTextStyles = {
+      fontSize: "0.875rem",
+      lineHeight: "1.25rem",
+      color: "#ef4444",
+      marginTop: "0.25rem"
+    };
+    return /* @__PURE__ */ jsxs37("div", { style: containerStyles, children: [
+      label && /* @__PURE__ */ jsx45("label", { style: labelStyles, children: label }),
+      /* @__PURE__ */ jsx45(
+        "textarea",
+        {
+          ref,
+          style: {
+            ...textareaStyles,
+            ...style
+          },
+          onFocus: () => setIsFocused(true),
+          onBlur: () => setIsFocused(false),
+          disabled,
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ jsx45("p", { style: errorTextStyles, children: error })
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
+
+// src/components/shared/Card.tsx
+import React26 from "react";
+import { jsx as jsx46 } from "react/jsx-runtime";
+var Card = React26.forwardRef(
+  ({ style, variant = "default", padding = "md", children, ...props }, ref) => {
+    const [isHovered, setIsHovered] = React26.useState(false);
+    const paddingStyles = {
+      none: "0",
+      sm: "0.75rem",
+      md: "1.5rem",
+      lg: "2rem"
+    };
+    const variantStyles = {
+      default: {
+        normal: {
+          backgroundColor: "#ffffff",
+          border: "1px solid #e5e7eb",
+          boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)"
+        },
+        hover: {
+          boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)"
+        }
+      },
+      outlined: {
+        normal: {
+          backgroundColor: "#ffffff",
+          border: "2px solid #e5e7eb",
+          boxShadow: "none"
+        },
+        hover: {
+          borderColor: "#d1d5db"
+        }
+      },
+      elevated: {
+        normal: {
+          backgroundColor: "#ffffff",
+          border: "none",
+          boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)"
+        },
+        hover: {
+          boxShadow: "0 10px 15px rgba(0, 0, 0, 0.15)",
+          transform: "translateY(-2px)"
+        }
+      }
+    };
+    const baseStyles = {
+      borderRadius: "0.5rem",
+      padding: paddingStyles[padding],
+      transition: "all 0.2s ease"
+    };
+    const currentVariant = variantStyles[variant];
+    const combinedStyles = {
+      ...baseStyles,
+      ...currentVariant.normal,
+      ...isHovered ? currentVariant.hover : {},
+      ...style
+    };
+    return /* @__PURE__ */ jsx46(
+      "div",
+      {
+        ref,
+        style: combinedStyles,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+
+// src/components/shared/Badge.tsx
+import React27 from "react";
+import { jsx as jsx47 } from "react/jsx-runtime";
+var Badge = React27.forwardRef(
+  ({ style, variant = "default", size = "md", children, ...props }, ref) => {
+    const variantStyles = {
+      default: {
+        backgroundColor: "#f3f4f6",
+        color: "#374151"
+      },
+      success: {
+        backgroundColor: "#d1fae5",
+        color: "#065f46"
+      },
+      warning: {
+        backgroundColor: "#fef3c7",
+        color: "#92400e"
+      },
+      error: {
+        backgroundColor: "#fee2e2",
+        color: "#991b1b"
+      },
+      info: {
+        backgroundColor: "#dbeafe",
+        color: "#1e40af"
+      }
+    };
+    const sizeStyles = {
+      sm: {
+        fontSize: "0.75rem",
+        lineHeight: "1rem",
+        padding: "0.125rem 0.5rem"
+      },
+      md: {
+        fontSize: "0.875rem",
+        lineHeight: "1.25rem",
+        padding: "0.25rem 0.75rem"
+      },
+      lg: {
+        fontSize: "1rem",
+        lineHeight: "1.5rem",
+        padding: "0.375rem 1rem"
+      }
+    };
+    const baseStyles = {
+      display: "inline-flex",
+      alignItems: "center",
+      borderRadius: "9999px",
+      fontWeight: "500",
+      whiteSpace: "nowrap"
+    };
+    const combinedStyles = {
+      ...baseStyles,
+      ...variantStyles[variant],
+      ...sizeStyles[size],
+      ...style
+    };
+    return /* @__PURE__ */ jsx47("span", { ref, style: combinedStyles, ...props, children });
+  }
+);
+Badge.displayName = "Badge";
+
+// src/components/shared/Table.tsx
+import React28 from "react";
+import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
+function Table({
+  columns,
+  data,
+  striped = false,
+  hoverable = true,
+  bordered = true,
+  style
+}) {
+  const [hoveredRow, setHoveredRow] = React28.useState(null);
+  const tableStyles = {
+    width: "100%",
+    borderCollapse: "collapse",
+    fontSize: "0.875rem",
+    lineHeight: "1.25rem",
+    ...style
+  };
+  const theadStyles = {
+    backgroundColor: "#f9fafb",
+    borderBottom: "2px solid #e5e7eb"
+  };
+  const thStyles = {
+    padding: "0.75rem 1rem",
+    textAlign: "left",
+    fontWeight: "600",
+    color: "#374151",
+    borderBottom: bordered ? "1px solid #e5e7eb" : "none"
+  };
+  const getTdStyles = (rowIndex) => ({
+    padding: "0.75rem 1rem",
+    borderBottom: bordered ? "1px solid #e5e7eb" : "none",
+    backgroundColor: hoverable && hoveredRow === rowIndex ? "#f9fafb" : striped && rowIndex % 2 === 1 ? "#f9fafb" : "#ffffff",
+    transition: "background-color 0.15s ease"
+  });
+  return /* @__PURE__ */ jsx48("div", { style: { overflowX: "auto", borderRadius: "0.5rem", border: bordered ? "1px solid #e5e7eb" : "none" }, children: /* @__PURE__ */ jsxs38("table", { style: tableStyles, children: [
+    /* @__PURE__ */ jsx48("thead", { style: theadStyles, children: /* @__PURE__ */ jsx48("tr", { children: columns.map((column) => /* @__PURE__ */ jsx48(
+      "th",
+      {
+        style: {
+          ...thStyles,
+          width: column.width
+        },
+        children: column.header
+      },
+      column.key
+    )) }) }),
+    /* @__PURE__ */ jsx48("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx48(
+      "tr",
+      {
+        onMouseEnter: () => hoverable && setHoveredRow(rowIndex),
+        onMouseLeave: () => hoverable && setHoveredRow(null),
+        children: columns.map((column) => /* @__PURE__ */ jsx48("td", { style: getTdStyles(rowIndex), children: column.render ? column.render(row) : row[column.key] }, column.key))
+      },
+      rowIndex
+    )) })
+  ] }) });
+}
+Table.displayName = "Table";
+
+// src/components/shared/Container.tsx
+import React29 from "react";
+import { jsx as jsx49 } from "react/jsx-runtime";
+var Container = React29.forwardRef(
+  ({ style, maxWidth = "lg", padding = "md", children, ...props }, ref) => {
+    const maxWidthStyles = {
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      xl: "1280px",
+      "2xl": "1536px",
+      full: "100%"
+    };
+    const paddingStyles = {
+      none: "0",
+      sm: "1rem",
+      md: "1.5rem",
+      lg: "2rem"
+    };
+    const containerStyles = {
+      width: "100%",
+      maxWidth: maxWidthStyles[maxWidth],
+      marginLeft: "auto",
+      marginRight: "auto",
+      paddingLeft: paddingStyles[padding],
+      paddingRight: paddingStyles[padding],
+      ...style
+    };
+    return /* @__PURE__ */ jsx49("div", { ref, style: containerStyles, ...props, children });
+  }
+);
+Container.displayName = "Container";
+
+// src/components/shared/Grid.tsx
+import React30 from "react";
+import { jsx as jsx50 } from "react/jsx-runtime";
+var Grid = React30.forwardRef(
+  ({ style, columns = 3, rows, gap = "md", width = "100%", height = "auto", responsive = true, children, ...props }, ref) => {
+    const gapStyles = {
+      none: "0",
+      sm: "0.5rem",
+      md: "1rem",
+      lg: "1.5rem",
+      xl: "2rem"
+    };
+    const gridStyles = {
+      display: "grid",
+      gridTemplateColumns: responsive ? `repeat(auto-fit, minmax(${Math.floor(100 / columns)}%, 1fr))` : `repeat(${columns}, 1fr)`,
+      gridTemplateRows: rows ? `repeat(${rows}, 1fr)` : void 0,
+      gap: gapStyles[gap] || gap,
+      width,
+      height,
+      ...style
+    };
+    return /* @__PURE__ */ jsx50("div", { ref, style: gridStyles, ...props, children });
+  }
+);
+Grid.displayName = "Grid";
+
+// src/components/shared/Stack.tsx
+import React31 from "react";
+import { jsx as jsx51 } from "react/jsx-runtime";
+var Stack = React31.forwardRef(
+  ({ style, direction = "vertical", gap = "md", align = "stretch", justify = "start", children, ...props }, ref) => {
+    const gapStyles = {
+      none: "0",
+      sm: "0.5rem",
+      md: "1rem",
+      lg: "1.5rem",
+      xl: "2rem"
+    };
+    const alignStyles = {
+      start: "flex-start",
+      center: "center",
+      end: "flex-end",
+      stretch: "stretch"
+    };
+    const justifyStyles = {
+      start: "flex-start",
+      center: "center",
+      end: "flex-end",
+      between: "space-between",
+      around: "space-around"
+    };
+    const stackStyles = {
+      display: "flex",
+      flexDirection: direction === "vertical" ? "column" : "row",
+      gap: gapStyles[gap],
+      alignItems: alignStyles[align],
+      justifyContent: justifyStyles[justify],
+      ...style
+    };
+    return /* @__PURE__ */ jsx51("div", { ref, style: stackStyles, ...props, children });
+  }
+);
+Stack.displayName = "Stack";
+
+// src/components/shared/Modal.tsx
+import React32 from "react";
+import { jsx as jsx52, jsxs as jsxs39 } from "react/jsx-runtime";
+var Modal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  size = "md",
+  closeOnOverlayClick = true
+}) => {
+  React32.useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+    }
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen]);
+  if (!isOpen) return null;
+  const sizeStyles = {
+    sm: "400px",
+    md: "600px",
+    lg: "800px",
+    xl: "1000px"
+  };
+  const overlayStyles = {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1e3,
+    padding: "1rem"
+  };
+  const modalStyles = {
+    backgroundColor: "#ffffff",
+    borderRadius: "0.5rem",
+    boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+    width: "100%",
+    maxWidth: sizeStyles[size],
+    maxHeight: "90vh",
+    display: "flex",
+    flexDirection: "column"
+  };
+  const headerStyles = {
+    padding: "1.5rem",
+    borderBottom: "1px solid #e5e7eb",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between"
+  };
+  const titleStyles = {
+    fontSize: "1.25rem",
+    lineHeight: "1.75rem",
+    fontWeight: "600",
+    color: "#111827"
+  };
+  const closeButtonStyles = {
+    padding: "0.5rem",
+    borderRadius: "0.375rem",
+    border: "none",
+    backgroundColor: "transparent",
+    cursor: "pointer",
+    fontSize: "1.5rem",
+    lineHeight: "1",
+    color: "#6b7280",
+    transition: "background-color 0.2s ease"
+  };
+  const contentStyles = {
+    padding: "1.5rem",
+    overflowY: "auto",
+    flex: 1
+  };
+  return /* @__PURE__ */ jsx52(
+    "div",
+    {
+      style: overlayStyles,
+      onClick: closeOnOverlayClick ? onClose : void 0,
+      children: /* @__PURE__ */ jsxs39(
+        "div",
+        {
+          style: modalStyles,
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            title && /* @__PURE__ */ jsxs39("div", { style: headerStyles, children: [
+              /* @__PURE__ */ jsx52("h2", { style: titleStyles, children: title }),
+              /* @__PURE__ */ jsx52(
+                "button",
+                {
+                  style: closeButtonStyles,
+                  onClick: onClose,
+                  "aria-label": "Close modal",
+                  children: "\xD7"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx52("div", { style: contentStyles, children })
+          ]
+        }
+      )
+    }
+  );
+};
+Modal.displayName = "Modal";
+
+// src/components/shared/DateRangePicker.tsx
+import { useEffect as useEffect15, useMemo as useMemo6, useState as useState23 } from "react";
+import { jsx as jsx53, jsxs as jsxs40 } from "react/jsx-runtime";
+var PrimusDateRangePicker = ({
+  startDate = null,
+  endDate = null,
+  ranges = [],
+  min,
+  max,
+  disabled = false,
+  onRangeChange
+}) => {
+  const [start, setStart] = useState23(startDate ?? "");
+  const [end, setEnd] = useState23(endDate ?? "");
+  useEffect15(() => {
+    setStart(startDate ?? "");
+  }, [startDate]);
+  useEffect15(() => {
+    setEnd(endDate ?? "");
+  }, [endDate]);
+  const normalizedRanges = useMemo6(() => {
+    return ranges.map((range) => typeof range === "string" ? resolvePreset(range) : range).filter((range) => !!range);
+  }, [ranges]);
+  const handleStartChange = (value) => {
+    setStart(value);
+    onRangeChange?.({ startDate: value || null, endDate: end || null });
+  };
+  const handleEndChange = (value) => {
+    setEnd(value);
+    onRangeChange?.({ startDate: start || null, endDate: value || null });
+  };
+  const applyRange = (range) => {
+    const nextStart = toDateInputValue(range.start);
+    const nextEnd = toDateInputValue(range.end);
+    setStart(nextStart);
+    setEnd(nextEnd);
+    onRangeChange?.({ startDate: nextStart, endDate: nextEnd, label: range.label });
+  };
+  return /* @__PURE__ */ jsxs40("div", { className: "space-y-3", children: [
+    normalizedRanges.length > 0 && /* @__PURE__ */ jsx53("div", { className: "flex flex-wrap gap-2", children: normalizedRanges.map((range) => /* @__PURE__ */ jsx53(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: () => applyRange(range),
+        className: "px-3 py-1.5 rounded-full text-xs font-medium border border-white/10 bg-white/5 text-gray-200 hover:bg-white/10 disabled:opacity-50 disabled:cursor-not-allowed",
+        children: range.label
+      },
+      range.label
+    )) }),
+    /* @__PURE__ */ jsxs40("div", { className: "flex flex-col md:flex-row gap-3", children: [
+      /* @__PURE__ */ jsx53(
+        "input",
+        {
+          type: "date",
+          value: start,
+          min,
+          max,
+          disabled,
+          onChange: (e) => handleStartChange(e.target.value),
+          className: "w-full px-3 py-2 rounded-lg border border-white/10 bg-white/5 text-gray-200 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500/50"
+        }
+      ),
+      /* @__PURE__ */ jsx53(
+        "input",
+        {
+          type: "date",
+          value: end,
+          min,
+          max,
+          disabled,
+          onChange: (e) => handleEndChange(e.target.value),
+          className: "w-full px-3 py-2 rounded-lg border border-white/10 bg-white/5 text-gray-200 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500/50"
+        }
+      )
+    ] })
+  ] });
+};
+var resolvePreset = (label) => {
+  const today = /* @__PURE__ */ new Date();
+  const startOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+  switch (label.toLowerCase()) {
+    case "today":
+      return { label, start: startOfDay, end: startOfDay };
+    case "last 7 days": {
+      const start = new Date(startOfDay);
+      start.setDate(start.getDate() - 6);
+      return { label, start, end: startOfDay };
+    }
+    case "last 30 days": {
+      const start = new Date(startOfDay);
+      start.setDate(start.getDate() - 29);
+      return { label, start, end: startOfDay };
+    }
+    case "this month": {
+      const start = new Date(today.getFullYear(), today.getMonth(), 1);
+      const end = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+      return { label, start, end };
+    }
+    default:
+      return null;
+  }
+};
+var toDateInputValue = (value) => {
+  if (typeof value === "string") {
+    return value;
+  }
+  const year = value.getFullYear();
+  const month = String(value.getMonth() + 1).padStart(2, "0");
+  const day = String(value.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+
+// src/components/shared/FilterBar.tsx
+import { jsx as jsx54, jsxs as jsxs41 } from "react/jsx-runtime";
+var PrimusFilterBar = ({
+  filters,
+  activeFilters,
+  onChange,
+  children
+}) => {
+  const updateFilter = (key, value) => {
+    const next = {
+      ...activeFilters,
+      [key]: value
+    };
+    onChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs41("div", { className: "flex flex-wrap gap-4 items-end", children: [
+    filters.map((filter) => /* @__PURE__ */ jsxs41("div", { className: "min-w-[220px]", children: [
+      filter.type === "select" && /* @__PURE__ */ jsx54(
+        Select,
+        {
+          label: filter.label,
+          placeholder: filter.placeholder,
+          options: filter.options ?? [],
+          value: activeFilters[filter.key] ?? "",
+          onChange: (value) => updateFilter(filter.key, value)
+        }
+      ),
+      filter.type === "toggle" && /* @__PURE__ */ jsx54(
+        Toggle,
+        {
+          label: filter.label,
+          checked: Boolean(activeFilters[filter.key]),
+          onChange: (checked) => updateFilter(filter.key, checked)
+        }
+      ),
+      filter.type === "search" && /* @__PURE__ */ jsx54(
+        Input,
+        {
+          label: filter.label,
+          placeholder: filter.placeholder ?? "Search...",
+          value: activeFilters[filter.key] ?? "",
+          onChange: (event) => updateFilter(filter.key, event.target.value)
+        }
+      )
+    ] }, filter.key)),
+    children
+  ] });
+};
+
+// src/components/shared/ExportMenu.tsx
+import { useEffect as useEffect16, useState as useState24 } from "react";
+import { jsx as jsx55, jsxs as jsxs42 } from "react/jsx-runtime";
+var PrimusExportMenu = ({
+  formats = ["CSV", "PDF", "PNG", "JSON"],
+  includeCharts = true,
+  includeStats = true,
+  includeTables = true,
+  onExport
+}) => {
+  const [format, setFormat] = useState24(formats[0] ?? "CSV");
+  const [charts, setCharts] = useState24(includeCharts);
+  const [stats, setStats] = useState24(includeStats);
+  const [tables, setTables] = useState24(includeTables);
+  useEffect16(() => {
+    if (!formats.includes(format)) {
+      setFormat(formats[0] ?? "CSV");
+    }
+  }, [formats, format]);
+  const handleExport = () => {
+    onExport?.({
+      format,
+      includeCharts: charts,
+      includeStats: stats,
+      includeTables: tables
+    });
+  };
+  return /* @__PURE__ */ jsxs42("div", { className: "flex flex-wrap items-center gap-3", children: [
+    /* @__PURE__ */ jsx55(
+      "select",
+      {
+        value: format,
+        onChange: (event) => setFormat(event.target.value),
+        className: "px-3 py-2 rounded-lg border border-white/10 bg-white/5 text-gray-200 text-sm",
+        children: formats.map((item) => /* @__PURE__ */ jsx55("option", { value: item, children: item }, item))
+      }
+    ),
+    /* @__PURE__ */ jsxs42("label", { className: "flex items-center gap-2 text-xs text-gray-300", children: [
+      /* @__PURE__ */ jsx55("input", { type: "checkbox", checked: charts, onChange: (e) => setCharts(e.target.checked) }),
+      "Charts"
+    ] }),
+    /* @__PURE__ */ jsxs42("label", { className: "flex items-center gap-2 text-xs text-gray-300", children: [
+      /* @__PURE__ */ jsx55("input", { type: "checkbox", checked: stats, onChange: (e) => setStats(e.target.checked) }),
+      "Stats"
+    ] }),
+    /* @__PURE__ */ jsxs42("label", { className: "flex items-center gap-2 text-xs text-gray-300", children: [
+      /* @__PURE__ */ jsx55("input", { type: "checkbox", checked: tables, onChange: (e) => setTables(e.target.checked) }),
+      "Tables"
+    ] }),
+    /* @__PURE__ */ jsx55(
+      "button",
+      {
+        type: "button",
+        onClick: handleExport,
+        className: "px-4 py-2 rounded-lg bg-purple-600 text-white text-sm font-medium hover:bg-purple-500",
+        children: "Export"
+      }
+    )
+  ] });
+};
+
+// src/components/shared/Search.tsx
+import { useEffect as useEffect17, useMemo as useMemo7, useState as useState25 } from "react";
+import { jsx as jsx56, jsxs as jsxs43 } from "react/jsx-runtime";
+var PrimusSearch = ({
+  placeholder = "Search...",
+  debounce = 300,
+  value = "",
+  showSuggestions = false,
+  suggestions = [],
+  onSearch
+}) => {
+  const [query, setQuery] = useState25(value);
+  useEffect17(() => {
+    setQuery(value);
+  }, [value]);
+  useEffect17(() => {
+    const handle = window.setTimeout(() => {
+      onSearch?.(query);
+    }, debounce);
+    return () => window.clearTimeout(handle);
+  }, [query, debounce, onSearch]);
+  const visibleSuggestions = useMemo7(() => {
+    if (!showSuggestions || !suggestions.length) {
+      return [];
+    }
+    if (!query) {
+      return suggestions.slice(0, 5);
+    }
+    return suggestions.filter((item) => item.toLowerCase().includes(query.toLowerCase())).slice(0, 5);
+  }, [suggestions, query, showSuggestions]);
+  return /* @__PURE__ */ jsxs43("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx56(
+      "input",
+      {
+        type: "text",
+        value: query,
+        placeholder,
+        onChange: (event) => setQuery(event.target.value),
+        className: "w-full px-3 py-2 rounded-lg border border-white/10 bg-white/5 text-gray-200 text-sm focus:outline-none focus:ring-1 focus:ring-purple-500/50"
+      }
+    ),
+    visibleSuggestions.length > 0 && /* @__PURE__ */ jsx56("div", { className: "absolute mt-2 w-full rounded-lg border border-white/10 bg-slate-900/90 backdrop-blur-sm shadow-lg z-10", children: visibleSuggestions.map((item) => /* @__PURE__ */ jsx56(
+      "button",
+      {
+        type: "button",
+        onClick: () => setQuery(item),
+        className: "w-full text-left px-3 py-2 text-sm text-gray-200 hover:bg-white/10",
+        children: item
+      },
+      item
+    )) })
+  ] });
+};
 export {
   AICopilot,
   AccountDashboard,
   AgentDirectory,
+  Badge,
+  Button,
+  Card,
+  Checkbox,
   CheckoutForm,
   ClaimStatusTracker,
+  Container,
   CreditCardVisual,
   CreditScoreCard,
   DashboardGrid,
@@ -2494,29 +4183,64 @@ export {
   FeatureFlagToggle,
   FileUploader,
   FraudDetectionDashboard,
+  Grid,
+  Input,
   KYCVerification,
   LoanCalculator,
   LogViewer,
   LoginPage,
+  Modal,
   NotificationBell,
-  NotificationFeed,
+  PrimusNotificationFeed as NotificationFeed,
   PolicyCard,
   PremiumCalculator,
+  PrimusActivityFeed,
+  PrimusAreaChart,
+  Badge as PrimusBadge,
+  PrimusBarChart,
+  Button as PrimusButton,
+  Card as PrimusCard,
+  PrimusChartBase,
+  Checkbox as PrimusCheckbox,
+  Container as PrimusContainer,
   PrimusDashboard,
   PrimusDataTable,
+  PrimusDateRangePicker,
+  PrimusExportMenu,
+  PrimusFilterBar,
+  Grid as PrimusGrid,
   PrimusHeader,
+  Input as PrimusInput,
   PrimusLayout,
+  PrimusLineChart,
   PrimusLogin,
   PrimusModal,
+  Modal as PrimusModalComponent,
   PrimusNotificationCenter,
+  PrimusNotificationFeed,
   PrimusNotifications,
+  PrimusPieChart,
   PrimusProvider,
+  RadioGroup as PrimusRadioGroup,
+  PrimusSearch,
+  Select as PrimusSelect,
   PrimusSidebar,
+  PrimusSparkline,
+  Stack as PrimusStack,
   PrimusStatCard,
+  Table as PrimusTable,
+  Textarea as PrimusTextarea,
   PrimusThemeProvider,
   PrimusThemeToggle,
+  Toggle as PrimusToggle,
   QuoteComparison,
+  RadioGroup,
   SecurityDashboard,
+  Select,
+  Stack,
+  Table,
+  Textarea,
+  Toggle,
   TransactionHistory,
   UserProfile,
   themeColors,