@mdxui/auth 1.1.0 → 1.1.1

package/dist/index.js

@@ -182,56 +182,121 @@ function AuthGate({
   }
 }
 
+// src/providers/vault-provider.tsx
+import { createContext, useContext, useMemo } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var VaultContext = createContext(null);
+var defaultFields = [
+  { key: "api_key", label: "API Key", type: "password", required: true }
+];
+function VaultProvider({
+  children,
+  client,
+  initialItems = []
+}) {
+  const contextValue = useMemo(() => {
+    const getIntegrationFields = (integrationId) => {
+      if (client?.getIntegrationFields) {
+        return client.getIntegrationFields(integrationId);
+      }
+      return defaultFields;
+    };
+    return {
+      client: client ?? null,
+      items: initialItems,
+      loading: false,
+      error: null,
+      reload: async () => {
+        if (!client) {
+          console.warn("VaultProvider: No client provided, cannot reload");
+          return;
+        }
+        await client.list();
+      },
+      createItem: async (integrationId, credentials) => {
+        if (!client) {
+          throw new Error("VaultProvider: No client provided");
+        }
+        await client.create(integrationId, credentials);
+      },
+      rotateItem: async (id, credentials) => {
+        if (!client) {
+          throw new Error("VaultProvider: No client provided");
+        }
+        await client.rotate(id, credentials);
+      },
+      deleteItem: async (id) => {
+        if (!client) {
+          throw new Error("VaultProvider: No client provided");
+        }
+        await client.delete(id);
+      },
+      getIntegrationFields
+    };
+  }, [client, initialItems]);
+  return /* @__PURE__ */ jsx4(VaultContext.Provider, { value: contextValue, children });
+}
+function useVaultContext() {
+  const context = useContext(VaultContext);
+  if (!context) {
+    throw new Error("useVaultContext must be used within a VaultProvider");
+  }
+  return context;
+}
+function useVaultContextOptional() {
+  return useContext(VaultContext);
+}
+
 // src/widgets/user-profile.tsx
 import { UserProfile as WorkOSUserProfile } from "@workos-inc/widgets";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function UserProfile({ authToken, className }) {
-  return /* @__PURE__ */ jsx4("div", { className, children: /* @__PURE__ */ jsx4(WorkOSUserProfile, { authToken }) });
+  return /* @__PURE__ */ jsx5("div", { className, children: /* @__PURE__ */ jsx5(WorkOSUserProfile, { authToken }) });
 }
 
 // src/widgets/user-security.tsx
 import { UserSecurity as WorkOSUserSecurity } from "@workos-inc/widgets";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function UserSecurity({ authToken, className }) {
-  return /* @__PURE__ */ jsx5("div", { className, children: /* @__PURE__ */ jsx5(WorkOSUserSecurity, { authToken }) });
+  return /* @__PURE__ */ jsx6("div", { className, children: /* @__PURE__ */ jsx6(WorkOSUserSecurity, { authToken }) });
 }
 
 // src/widgets/user-sessions.tsx
 import { UserSessions as WorkOSUserSessions } from "@workos-inc/widgets";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function UserSessions(props) {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx6("div", { className, children: /* @__PURE__ */ jsx6(WorkOSUserSessions, { ...rest }) });
+  return /* @__PURE__ */ jsx7("div", { className, children: /* @__PURE__ */ jsx7(WorkOSUserSessions, { ...rest }) });
 }
 
 // src/widgets/api-keys.tsx
 import { ApiKeys as WorkOSApiKeys } from "@workos-inc/widgets";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function ApiKeys({ authToken, className }) {
-  return /* @__PURE__ */ jsx7("div", { className, children: /* @__PURE__ */ jsx7(WorkOSApiKeys, { authToken }) });
+  return /* @__PURE__ */ jsx8("div", { className, children: /* @__PURE__ */ jsx8(WorkOSApiKeys, { authToken }) });
 }
 
 // src/widgets/users-management.tsx
 import { UsersManagement as WorkOSUsersManagement } from "@workos-inc/widgets";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function UsersManagement({
   authToken,
   organizationId: _organizationId,
   className
 }) {
-  return /* @__PURE__ */ jsx8("div", { className, children: /* @__PURE__ */ jsx8(WorkOSUsersManagement, { authToken }) });
+  return /* @__PURE__ */ jsx9("div", { className, children: /* @__PURE__ */ jsx9(WorkOSUsersManagement, { authToken }) });
 }
 
 // src/widgets/pipes.tsx
 import { Pipes as WorkOSPipes } from "@workos-inc/widgets";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function Pipes({ authToken, className }) {
-  return /* @__PURE__ */ jsx9("div", { className, children: /* @__PURE__ */ jsx9(WorkOSPipes, { authToken }) });
+  return /* @__PURE__ */ jsx10("div", { className, children: /* @__PURE__ */ jsx10(WorkOSPipes, { authToken }) });
 }
 
 // src/widgets/organization-switcher.tsx
 import { OrganizationSwitcher as WorkOSOrganizationSwitcher } from "@workos-inc/widgets";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function OrganizationSwitcher({
   authToken,
   switchToOrganization,
@@ -240,7 +305,7 @@ function OrganizationSwitcher({
   truncateBehavior,
   className
 }) {
-  return /* @__PURE__ */ jsx10("div", { className, children: /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11("div", { className, children: /* @__PURE__ */ jsx11(
     WorkOSOrganizationSwitcher,
     {
       authToken,
@@ -252,9 +317,692 @@ function OrganizationSwitcher({
   ) });
 }
 
+// src/vault/secrets-manager/secrets-manager.tsx
+import {
+  Badge,
+  Button as Button2,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Input as Input2,
+  Select as Select2,
+  SelectContent as SelectContent2,
+  SelectItem as SelectItem2,
+  SelectTrigger as SelectTrigger2,
+  SelectValue as SelectValue2,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "@mdxui/primitives";
+import { cn } from "@mdxui/primitives/lib/utils";
+import {
+  Copy,
+  Edit,
+  Eye,
+  EyeOff,
+  Filter,
+  Plus,
+  Search,
+  Trash2
+} from "lucide-react";
+import * as React2 from "react";
+import { toast } from "sonner";
+
+// src/vault/secrets-manager/secret-form.tsx
+import {
+  Button,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Textarea
+} from "@mdxui/primitives";
+import * as React from "react";
+import { jsx as jsx12, jsxs as jsxs2 } from "react/jsx-runtime";
+function SecretForm({
+  secret,
+  environment: defaultEnvironment,
+  environments,
+  onSubmit,
+  onCancel
+}) {
+  const [key, setKey] = React.useState(secret?.key || "");
+  const [value, setValue] = React.useState(secret?.value || "");
+  const [description, setDescription] = React.useState(
+    secret?.description || ""
+  );
+  const [environment, setEnvironment] = React.useState(
+    secret?.environment || defaultEnvironment
+  );
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!key.trim() || !value.trim()) return;
+    onSubmit({
+      key: key.trim(),
+      value: value.trim(),
+      description: description.trim() || void 0,
+      environment
+    });
+  };
+  return /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx12(Label, { htmlFor: "key", children: "Key *" }),
+      /* @__PURE__ */ jsx12(
+        Input,
+        {
+          id: "key",
+          placeholder: "DATABASE_URL",
+          value: key,
+          onChange: (e) => setKey(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, "_")),
+          required: true,
+          autoFocus: true
+        }
+      ),
+      /* @__PURE__ */ jsx12("p", { className: "text-xs text-muted-foreground", children: "Use UPPER_CASE with underscores (e.g., API_KEY, DATABASE_URL)" })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx12(Label, { htmlFor: "value", children: "Value *" }),
+      /* @__PURE__ */ jsx12(
+        Textarea,
+        {
+          id: "value",
+          placeholder: "Enter secret value",
+          value,
+          onChange: (e) => setValue(e.target.value),
+          rows: 3,
+          required: true,
+          className: "font-mono"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx12(Label, { htmlFor: "environment", children: "Environment *" }),
+      /* @__PURE__ */ jsxs2(Select, { value: environment, onValueChange: setEnvironment, children: [
+        /* @__PURE__ */ jsx12(SelectTrigger, { id: "environment", children: /* @__PURE__ */ jsx12(SelectValue, {}) }),
+        /* @__PURE__ */ jsx12(SelectContent, { children: environments.map((env) => /* @__PURE__ */ jsx12(SelectItem, { value: env, children: env.charAt(0).toUpperCase() + env.slice(1) }, env)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx12(Label, { htmlFor: "description", children: "Description" }),
+      /* @__PURE__ */ jsx12(
+        Textarea,
+        {
+          id: "description",
+          placeholder: "Optional description of this secret",
+          value: description,
+          onChange: (e) => setDescription(e.target.value),
+          rows: 2
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx12(Button, { type: "button", variant: "outline", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsxs2(Button, { type: "submit", disabled: !key.trim() || !value.trim(), children: [
+        secret ? "Update" : "Create",
+        " Secret"
+      ] })
+    ] })
+  ] });
+}
+
+// src/vault/secrets-manager/secrets-manager.tsx
+import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
+function SecretsManager({
+  secrets: externalSecrets = [],
+  environments = ["development", "staging", "production"],
+  currentEnvironment = "development",
+  onEnvironmentChange,
+  onCreate,
+  onUpdate,
+  onDelete,
+  hideValues: initialHideValues = true,
+  editable = true,
+  className
+}) {
+  const [localSecrets, setLocalSecrets] = React2.useState([]);
+  const [hideValues, setHideValues] = React2.useState(initialHideValues);
+  const [searchQuery, setSearchQuery] = React2.useState("");
+  const [environment, setEnvironment] = React2.useState(currentEnvironment);
+  const [visibleSecrets, setVisibleSecrets] = React2.useState(
+    /* @__PURE__ */ new Set()
+  );
+  const [editingSecret, setEditingSecret] = React2.useState(null);
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = React2.useState(false);
+  const [isEditDialogOpen, setIsEditDialogOpen] = React2.useState(false);
+  const secrets = externalSecrets.length > 0 ? externalSecrets : localSecrets;
+  React2.useEffect(() => {
+    setEnvironment(currentEnvironment);
+  }, [currentEnvironment]);
+  const filteredSecrets = React2.useMemo(() => {
+    return secrets.filter((secret) => {
+      const matchesSearch = searchQuery ? secret.key.toLowerCase().includes(searchQuery.toLowerCase()) || secret.description?.toLowerCase().includes(searchQuery.toLowerCase()) : true;
+      const matchesEnvironment = environment === "all" || secret.environment === environment;
+      return matchesSearch && matchesEnvironment;
+    });
+  }, [secrets, searchQuery, environment]);
+  const handleEnvironmentChange = (newEnvironment) => {
+    setEnvironment(newEnvironment);
+    onEnvironmentChange?.(newEnvironment);
+  };
+  const handleCreate = async (secretData) => {
+    const newSecret = {
+      ...secretData,
+      id: crypto.randomUUID(),
+      createdAt: /* @__PURE__ */ new Date(),
+      updatedAt: /* @__PURE__ */ new Date()
+    };
+    try {
+      await onCreate?.(secretData);
+      if (externalSecrets.length === 0) {
+        setLocalSecrets((prev) => [...prev, newSecret]);
+      }
+      setIsCreateDialogOpen(false);
+      toast.success("Secret created successfully");
+    } catch (error) {
+      toast.error("Failed to create secret");
+    }
+  };
+  const handleUpdate = async (id, updates) => {
+    try {
+      await onUpdate?.(id, { ...updates, updatedAt: /* @__PURE__ */ new Date() });
+      if (externalSecrets.length === 0) {
+        setLocalSecrets(
+          (prev) => prev.map(
+            (secret) => secret.id === id ? { ...secret, ...updates, updatedAt: /* @__PURE__ */ new Date() } : secret
+          )
+        );
+      }
+      setIsEditDialogOpen(false);
+      setEditingSecret(null);
+      toast.success("Secret updated successfully");
+    } catch (error) {
+      toast.error("Failed to update secret");
+    }
+  };
+  const handleDelete = async (id) => {
+    if (!confirm("Are you sure you want to delete this secret?")) return;
+    try {
+      await onDelete?.(id);
+      if (externalSecrets.length === 0) {
+        setLocalSecrets((prev) => prev.filter((secret) => secret.id !== id));
+      }
+      toast.success("Secret deleted");
+    } catch (error) {
+      toast.error("Failed to delete secret");
+    }
+  };
+  const handleCopy = (value) => {
+    navigator.clipboard.writeText(value);
+    toast.success("Value copied to clipboard");
+  };
+  const toggleSecretVisibility = (id) => {
+    setVisibleSecrets((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+  const toggleAllVisibility = () => {
+    setHideValues(!hideValues);
+    if (!hideValues) {
+      setVisibleSecrets(/* @__PURE__ */ new Set());
+    }
+  };
+  const isSecretVisible = (id) => {
+    return hideValues ? visibleSecrets.has(id) : true;
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ jsxs3(Card, { children: [
+      /* @__PURE__ */ jsx13(CardHeader, { children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ jsxs3("div", { children: [
+          /* @__PURE__ */ jsx13(CardTitle, { children: "Environment Variables" }),
+          /* @__PURE__ */ jsx13(CardDescription, { children: "Manage your application secrets and configuration" })
+        ] }),
+        editable && /* @__PURE__ */ jsxs3(
+          Dialog,
+          {
+            open: isCreateDialogOpen,
+            onOpenChange: setIsCreateDialogOpen,
+            children: [
+              /* @__PURE__ */ jsx13(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(Button2, { children: [
+                /* @__PURE__ */ jsx13(Plus, { className: "mr-2 size-4" }),
+                "Add Secret"
+              ] }) }),
+              /* @__PURE__ */ jsxs3(DialogContent, { children: [
+                /* @__PURE__ */ jsx13(DialogHeader, { children: /* @__PURE__ */ jsx13(DialogTitle, { children: "Create New Secret" }) }),
+                /* @__PURE__ */ jsx13(
+                  SecretForm,
+                  {
+                    environment,
+                    environments,
+                    onSubmit: handleCreate,
+                    onCancel: () => setIsCreateDialogOpen(false)
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxs3(CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "relative flex-1", children: [
+            /* @__PURE__ */ jsx13(Search, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
+            /* @__PURE__ */ jsx13(
+              Input2,
+              {
+                placeholder: "Search secrets...",
+                value: searchQuery,
+                onChange: (e) => setSearchQuery(e.target.value),
+                className: "pl-9"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs3(Select2, { value: environment, onValueChange: handleEnvironmentChange, children: [
+            /* @__PURE__ */ jsxs3(SelectTrigger2, { className: "w-[180px]", children: [
+              /* @__PURE__ */ jsx13(Filter, { className: "mr-2 size-4" }),
+              /* @__PURE__ */ jsx13(SelectValue2, {})
+            ] }),
+            /* @__PURE__ */ jsxs3(SelectContent2, { children: [
+              /* @__PURE__ */ jsx13(SelectItem2, { value: "all", children: "All Environments" }),
+              environments.map((env) => /* @__PURE__ */ jsx13(SelectItem2, { value: env, children: env.charAt(0).toUpperCase() + env.slice(1) }, env))
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx13(Button2, { variant: "outline", size: "icon", onClick: toggleAllVisibility, children: hideValues ? /* @__PURE__ */ jsx13(Eye, { className: "size-4" }) : /* @__PURE__ */ jsx13(EyeOff, { className: "size-4" }) })
+        ] }),
+        filteredSecrets.length > 0 ? /* @__PURE__ */ jsx13("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs3(Table, { children: [
+          /* @__PURE__ */ jsx13(TableHeader, { children: /* @__PURE__ */ jsxs3(TableRow, { children: [
+            /* @__PURE__ */ jsx13(TableHead, { children: "Key" }),
+            /* @__PURE__ */ jsx13(TableHead, { children: "Value" }),
+            /* @__PURE__ */ jsx13(TableHead, { children: "Environment" }),
+            /* @__PURE__ */ jsx13(TableHead, { children: "Description" }),
+            /* @__PURE__ */ jsx13(TableHead, { className: "w-[100px]", children: "Actions" })
+          ] }) }),
+          /* @__PURE__ */ jsx13(TableBody, { children: filteredSecrets.map((secret) => /* @__PURE__ */ jsxs3(TableRow, { children: [
+            /* @__PURE__ */ jsx13(TableCell, { children: /* @__PURE__ */ jsx13("code", { className: "rounded bg-muted px-2 py-1 font-mono text-sm", children: secret.key }) }),
+            /* @__PURE__ */ jsx13(TableCell, { children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx13("code", { className: "flex-1 rounded bg-muted px-2 py-1 font-mono text-sm", children: isSecretVisible(secret.id) ? secret.value : "\u2022".repeat(Math.min(secret.value.length, 20)) }),
+              /* @__PURE__ */ jsx13(
+                Button2,
+                {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: () => toggleSecretVisibility(secret.id),
+                  children: isSecretVisible(secret.id) ? /* @__PURE__ */ jsx13(EyeOff, { className: "size-4" }) : /* @__PURE__ */ jsx13(Eye, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx13(
+                Button2,
+                {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: () => handleCopy(secret.value),
+                  children: /* @__PURE__ */ jsx13(Copy, { className: "size-4" })
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx13(TableCell, { children: /* @__PURE__ */ jsx13(Badge, { variant: "secondary", children: secret.environment }) }),
+            /* @__PURE__ */ jsx13(TableCell, { children: /* @__PURE__ */ jsx13("span", { className: "text-sm text-muted-foreground", children: secret.description || "-" }) }),
+            /* @__PURE__ */ jsx13(TableCell, { children: editable && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx13(
+                Button2,
+                {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: () => {
+                    setEditingSecret(secret);
+                    setIsEditDialogOpen(true);
+                  },
+                  children: /* @__PURE__ */ jsx13(Edit, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx13(
+                Button2,
+                {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: () => handleDelete(secret.id),
+                  children: /* @__PURE__ */ jsx13(Trash2, { className: "size-4 text-destructive" })
+                }
+              )
+            ] }) })
+          ] }, secret.id)) })
+        ] }) }) : /* @__PURE__ */ jsx13("div", { className: "flex h-32 items-center justify-center rounded-md border-2 border-dashed", children: /* @__PURE__ */ jsx13("p", { className: "text-sm text-muted-foreground", children: searchQuery ? "No secrets found matching your search" : "No secrets yet. Add your first secret to get started." }) })
+      ] })
+    ] }),
+    editingSecret && /* @__PURE__ */ jsx13(Dialog, { open: isEditDialogOpen, onOpenChange: setIsEditDialogOpen, children: /* @__PURE__ */ jsxs3(DialogContent, { children: [
+      /* @__PURE__ */ jsx13(DialogHeader, { children: /* @__PURE__ */ jsx13(DialogTitle, { children: "Edit Secret" }) }),
+      /* @__PURE__ */ jsx13(
+        SecretForm,
+        {
+          secret: editingSecret,
+          environment,
+          environments,
+          onSubmit: (data) => handleUpdate(editingSecret.id, data),
+          onCancel: () => {
+            setIsEditDialogOpen(false);
+            setEditingSecret(null);
+          }
+        }
+      )
+    ] }) })
+  ] });
+}
+
+// src/vault/vault-delete-dialog.tsx
+import {
+  Button as Button3,
+  Dialog as Dialog2,
+  DialogContent as DialogContent2,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader as DialogHeader2,
+  DialogTitle as DialogTitle2
+} from "@mdxui/primitives";
+import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+function VaultDeleteDialog({ isOpen, onClose, itemName, onConfirm }) {
+  return /* @__PURE__ */ jsx14(Dialog2, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs4(DialogContent2, { children: [
+    /* @__PURE__ */ jsxs4(DialogHeader2, { children: [
+      /* @__PURE__ */ jsx14(DialogTitle2, { children: "Delete Credentials" }),
+      /* @__PURE__ */ jsxs4(DialogDescription, { children: [
+        "Are you sure you want to delete credentials for ",
+        itemName,
+        "? This action cannot be undone."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs4(DialogFooter, { children: [
+      /* @__PURE__ */ jsx14(Button3, { variant: "outline", onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ jsx14(Button3, { variant: "destructive", onClick: onConfirm, children: "Delete" })
+    ] })
+  ] }) });
+}
+
+// src/vault/vault-empty-state.tsx
+import { Button as Button4 } from "@mdxui/primitives";
+import { Lock } from "lucide-react";
+import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+function VaultEmptyState({ onAddCredential }) {
+  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center justify-center rounded-md border border-dashed py-24 px-4 text-center", children: [
+    /* @__PURE__ */ jsx15("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-muted mb-4", children: /* @__PURE__ */ jsx15(Lock, { className: "h-6 w-6 text-muted-foreground" }) }),
+    /* @__PURE__ */ jsx15("h3", { className: "text-lg font-semibold mb-2", children: "No saved credentials" }),
+    /* @__PURE__ */ jsx15("p", { className: "text-sm text-muted-foreground mb-6 max-w-md", children: "Add API keys and account credentials for your agents to use securely." }),
+    /* @__PURE__ */ jsx15(Button4, { onClick: onAddCredential, children: "Add Credential" })
+  ] });
+}
+
+// src/vault/vault-input-modal.tsx
+import {
+  Button as Button5,
+  Dialog as Dialog3,
+  DialogContent as DialogContent3,
+  DialogFooter as DialogFooter2,
+  DialogHeader as DialogHeader3,
+  DialogTitle as DialogTitle3,
+  Input as Input3,
+  Label as Label2
+} from "@mdxui/primitives";
+import { Key } from "lucide-react";
+import { useState as useState4 } from "react";
+import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+function VaultInputModal({
+  isOpen,
+  onClose,
+  mode,
+  integration,
+  onSave
+}) {
+  const [values, setValues] = useState4({});
+  const [loading, setLoading] = useState4(false);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      await onSave(values);
+      setValues({});
+      onClose();
+    } catch (error) {
+      console.error("Failed to save credentials:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleClose = () => {
+    setValues({});
+    onClose();
+  };
+  if (!integration) return null;
+  const isValid = integration.fields.filter((f) => f.required).every((f) => values[f.key]?.trim());
+  return /* @__PURE__ */ jsx16(Dialog3, { open: isOpen, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs6(DialogContent3, { children: [
+    /* @__PURE__ */ jsx16(DialogHeader3, { children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx16("div", { className: "flex h-10 w-10 items-center justify-center rounded-md bg-white overflow-hidden p-1 border border-border", children: integration.logoUrl ? /* @__PURE__ */ jsx16(
+        "img",
+        {
+          src: integration.logoUrl,
+          alt: integration.name,
+          width: 32,
+          height: 32,
+          className: "h-full w-full object-contain rounded-sm"
+        }
+      ) : /* @__PURE__ */ jsx16(Key, { className: "h-5 w-5 text-muted-foreground" }) }),
+      /* @__PURE__ */ jsxs6(DialogTitle3, { children: [
+        mode === "create" ? "Add" : "Rotate",
+        " ",
+        integration.name,
+        " Credentials"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsx16("div", { className: "grid gap-4 py-4", children: integration.fields.map((field) => /* @__PURE__ */ jsxs6("div", { className: "grid gap-2", children: [
+        /* @__PURE__ */ jsxs6(Label2, { htmlFor: field.key, children: [
+          field.label,
+          field.required && /* @__PURE__ */ jsx16("span", { className: "text-destructive", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx16(
+          Input3,
+          {
+            id: field.key,
+            type: field.type,
+            placeholder: field.placeholder,
+            value: values[field.key] || "",
+            onChange: (e) => setValues((prev) => ({
+              ...prev,
+              [field.key]: e.target.value
+            })),
+            required: field.required
+          }
+        )
+      ] }, field.key)) }),
+      /* @__PURE__ */ jsxs6(DialogFooter2, { children: [
+        /* @__PURE__ */ jsx16(Button5, { type: "button", variant: "outline", onClick: handleClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx16(Button5, { type: "submit", disabled: loading || !isValid, children: loading ? "Saving..." : "Save" })
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/vault/vault-item-card.tsx
+import {
+  Button as Button6,
+  Card as Card2,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "@mdxui/primitives";
+import { Key as Key2, MoreVertical } from "lucide-react";
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+function formatDate(date) {
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function VaultItemCard({
+  id,
+  name,
+  logoUrl,
+  createdAt,
+  updatedAt,
+  onRotate,
+  onDelete
+}) {
+  const wasRotated = updatedAt.getTime() !== createdAt.getTime();
+  return /* @__PURE__ */ jsx17(Card2, { noPadding: true, className: "p-4", children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx17("div", { className: "flex h-10 w-10 items-center justify-center rounded-md bg-white overflow-hidden p-1 border border-border", children: logoUrl ? /* @__PURE__ */ jsx17(
+        "img",
+        {
+          src: logoUrl,
+          alt: name,
+          width: 32,
+          height: 32,
+          className: "h-full w-full object-contain rounded-sm"
+        }
+      ) : /* @__PURE__ */ jsx17(Key2, { className: "h-5 w-5 text-muted-foreground" }) }),
+      /* @__PURE__ */ jsxs7("div", { children: [
+        /* @__PURE__ */ jsx17("h4", { className: "text-sm font-medium", children: name }),
+        /* @__PURE__ */ jsx17("p", { className: "text-xs text-muted-foreground", children: wasRotated ? `Rotated: ${formatDate(updatedAt)}` : `Created: ${formatDate(createdAt)}` })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs7(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx17(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs7(Button6, { variant: "ghost", size: "icon-sm", children: [
+        /* @__PURE__ */ jsx17(MoreVertical, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx17("span", { className: "sr-only", children: "Open menu" })
+      ] }) }),
+      /* @__PURE__ */ jsxs7(DropdownMenuContent, { align: "end", children: [
+        /* @__PURE__ */ jsx17(DropdownMenuItem, { onClick: () => onRotate(id), children: "Rotate" }),
+        /* @__PURE__ */ jsx17(
+          DropdownMenuItem,
+          {
+            className: "text-destructive focus:text-destructive",
+            onClick: () => onDelete(id),
+            children: "Delete"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/vault/vault-list.tsx
+import { useState as useState5 } from "react";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+var defaultFields2 = [
+  { key: "api_key", label: "API Key", type: "password", required: true }
+];
+function VaultList({
+  items,
+  onRotate,
+  onDelete,
+  onOpenAddModal,
+  getIntegrationFields
+}) {
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState5(false);
+  const [inputModalOpen, setInputModalOpen] = useState5(false);
+  const [selectedItem, setSelectedItem] = useState5(null);
+  const [modalMode, setModalMode] = useState5("create");
+  const handleRotate = (id) => {
+    const item = items.find((i) => i.id === id);
+    if (!item) return;
+    setSelectedItem(item);
+    setModalMode("rotate");
+    setInputModalOpen(true);
+  };
+  const handleDeleteClick = (id) => {
+    const item = items.find((i) => i.id === id);
+    if (!item) return;
+    setSelectedItem(item);
+    setDeleteDialogOpen(true);
+  };
+  const handleConfirmDelete = async () => {
+    if (!selectedItem) return;
+    await onDelete(selectedItem.id);
+    setDeleteDialogOpen(false);
+    setSelectedItem(null);
+  };
+  const handleSave = async (credentials) => {
+    if (modalMode === "rotate" && selectedItem) {
+      await onRotate(selectedItem.id, credentials);
+    }
+    setInputModalOpen(false);
+    setSelectedItem(null);
+  };
+  const getIntegrationForModal = () => {
+    if (!selectedItem) return void 0;
+    const fields = getIntegrationFields ? getIntegrationFields(selectedItem.integrationId) : defaultFields2;
+    return {
+      id: selectedItem.integrationId,
+      name: selectedItem.name,
+      logoUrl: selectedItem.logoUrl,
+      fields
+    };
+  };
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx18(VaultEmptyState, { onAddCredential: onOpenAddModal });
+  }
+  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx18("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: items.map((item) => /* @__PURE__ */ jsx18(
+      VaultItemCard,
+      {
+        id: item.id,
+        name: item.name,
+        logoUrl: item.logoUrl,
+        createdAt: item.createdAt,
+        updatedAt: item.updatedAt,
+        onRotate: handleRotate,
+        onDelete: handleDeleteClick
+      },
+      item.id
+    )) }),
+    /* @__PURE__ */ jsx18(
+      VaultDeleteDialog,
+      {
+        isOpen: deleteDialogOpen,
+        onClose: () => {
+          setDeleteDialogOpen(false);
+          setSelectedItem(null);
+        },
+        itemName: selectedItem?.name || "",
+        onConfirm: handleConfirmDelete
+      }
+    ),
+    /* @__PURE__ */ jsx18(
+      VaultInputModal,
+      {
+        isOpen: inputModalOpen,
+        onClose: () => {
+          setInputModalOpen(false);
+          setSelectedItem(null);
+        },
+        mode: modalMode,
+        integration: getIntegrationForModal(),
+        onSave: handleSave
+      }
+    )
+  ] });
+}
+
 // src/components/sign-in-button.tsx
 import { useAuth as useAuth2 } from "@workos-inc/authkit-react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function SignInButton({
   children = "Sign In",
   onSignIn,
@@ -267,7 +1015,7 @@ function SignInButton({
     onSignIn?.();
     signIn();
   };
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx19(
     "button",
     {
       type: "button",
@@ -282,7 +1030,7 @@ function SignInButton({
 
 // src/components/sign-out-button.tsx
 import { useAuth as useAuth3 } from "@workos-inc/authkit-react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function SignOutButton({
   children = "Sign Out",
   onSignOut,
@@ -295,7 +1043,7 @@ function SignOutButton({
     onSignOut?.();
     signOut();
   };
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx20(
     "button",
     {
       type: "button",
@@ -310,7 +1058,7 @@ function SignOutButton({
 
 // src/components/user-menu.tsx
 import { useAuth as useAuth4 } from "@workos-inc/authkit-react";
-import { jsx as jsx13, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
 function getInitials(name) {
   if (!name) return "?";
   const parts = name.trim().split(/\s+/);
@@ -320,7 +1068,7 @@ function getInitials(name) {
 function UserMenu({ renderTrigger, renderMenu, className }) {
   const { user, signOut, isLoading } = useAuth4();
   if (isLoading) {
-    return /* @__PURE__ */ jsx13("div", { className, children: /* @__PURE__ */ jsx13("div", { className: "flex items-center gap-2 p-2", children: /* @__PURE__ */ jsx13("div", { className: "h-8 w-8 animate-pulse rounded-full bg-muted" }) }) });
+    return /* @__PURE__ */ jsx21("div", { className, children: /* @__PURE__ */ jsx21("div", { className: "flex items-center gap-2 p-2", children: /* @__PURE__ */ jsx21("div", { className: "h-8 w-8 animate-pulse rounded-full bg-muted" }) }) });
   }
   if (!user) {
     return null;
@@ -332,8 +1080,8 @@ function UserMenu({ renderTrigger, renderMenu, className }) {
   const triggerProps = { user, displayName, initials };
   const menuProps = { user, displayName, initials, signOut };
   if (!renderTrigger && !renderMenu) {
-    return /* @__PURE__ */ jsx13("div", { className, children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 p-2", children: [
-      /* @__PURE__ */ jsx13("div", { className: "h-8 w-8 rounded-full bg-muted flex items-center justify-center text-sm font-medium", children: user.profilePictureUrl ? /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx21("div", { className, children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 p-2", children: [
+      /* @__PURE__ */ jsx21("div", { className: "h-8 w-8 rounded-full bg-muted flex items-center justify-center text-sm font-medium", children: user.profilePictureUrl ? /* @__PURE__ */ jsx21(
         "img",
         {
           src: user.profilePictureUrl,
@@ -341,11 +1089,11 @@ function UserMenu({ renderTrigger, renderMenu, className }) {
           className: "h-full w-full rounded-full object-cover"
         }
       ) : initials }),
-      /* @__PURE__ */ jsxs2("div", { className: "text-sm", children: [
-        /* @__PURE__ */ jsx13("p", { className: "font-medium", children: displayName }),
-        /* @__PURE__ */ jsx13("p", { className: "text-muted-foreground text-xs", children: user.email })
+      /* @__PURE__ */ jsxs9("div", { className: "text-sm", children: [
+        /* @__PURE__ */ jsx21("p", { className: "font-medium", children: displayName }),
+        /* @__PURE__ */ jsx21("p", { className: "text-muted-foreground text-xs", children: user.email })
       ] }),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx21(
         "button",
         {
           type: "button",
@@ -356,7 +1104,7 @@ function UserMenu({ renderTrigger, renderMenu, className }) {
       )
     ] }) });
   }
-  return /* @__PURE__ */ jsxs2("div", { className, children: [
+  return /* @__PURE__ */ jsxs9("div", { className, children: [
     renderTrigger?.(triggerProps),
     renderMenu?.(menuProps)
   ] });
@@ -365,7 +1113,7 @@ function UserMenu({ renderTrigger, renderMenu, className }) {
 // src/components/team-switcher.tsx
 import { useAuth as useAuth5 } from "@workos-inc/authkit-react";
 import { OrganizationSwitcher as OrganizationSwitcher2 } from "@workos-inc/widgets";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function TeamSwitcher({
   renderWrapper,
   renderNoOrganization,
@@ -380,7 +1128,7 @@ function TeamSwitcher({
   }) => {
     return switchToOrganization({ organizationId: organizationId2 });
   };
-  const widget = /* @__PURE__ */ jsx14("div", { className: `organization-switcher-wrapper ${className ?? ""}`, children: /* @__PURE__ */ jsx14(
+  const widget = /* @__PURE__ */ jsx22("div", { className: `organization-switcher-wrapper ${className ?? ""}`, children: /* @__PURE__ */ jsx22(
     OrganizationSwitcher2,
     {
       authToken: getAccessToken,
@@ -394,15 +1142,15 @@ function TeamSwitcher({
 import { useAuth as useAuth6 } from "@workos-inc/authkit-react";
 
 // src/hooks/use-widget-token.ts
-import { useCallback, useEffect as useEffect2, useState as useState2 } from "react";
+import { useCallback, useEffect as useEffect3, useState as useState6 } from "react";
 function useWidgetToken({
   widget,
   organizationId,
   endpoint = "/api/workos/widget-token"
 }) {
-  const [token, setToken] = useState2(null);
-  const [loading, setLoading] = useState2(true);
-  const [error, setError] = useState2(null);
+  const [token, setToken] = useState6(null);
+  const [loading, setLoading] = useState6(true);
+  const [error, setError] = useState6(null);
   const fetchToken = useCallback(async () => {
     try {
       setLoading(true);
@@ -423,12 +1171,77 @@ function useWidgetToken({
       setLoading(false);
     }
   }, [widget, organizationId, endpoint]);
-  useEffect2(() => {
+  useEffect3(() => {
     fetchToken();
   }, [fetchToken]);
   return { token, loading, error, refetch: fetchToken };
 }
 
+// src/hooks/use-vault.ts
+import { useCallback as useCallback2, useMemo as useMemo3 } from "react";
+function useVault() {
+  const context = useVaultContext();
+  const findItem = useCallback2(
+    (id) => {
+      return context.items.find((item) => item.id === id);
+    },
+    [context.items]
+  );
+  const findByIntegration = useCallback2(
+    (integrationId) => {
+      return context.items.filter((item) => item.integrationId === integrationId);
+    },
+    [context.items]
+  );
+  return useMemo3(
+    () => ({
+      items: context.items,
+      loading: context.loading,
+      error: context.error,
+      isConnected: context.client !== null,
+      reload: context.reload,
+      create: context.createItem,
+      rotate: context.rotateItem,
+      remove: context.deleteItem,
+      getIntegrationFields: context.getIntegrationFields,
+      findItem,
+      findByIntegration
+    }),
+    [context, findItem, findByIntegration]
+  );
+}
+function useVaultOptional() {
+  const context = useVaultContextOptional();
+  const findItem = useCallback2(
+    (id) => {
+      return context?.items.find((item) => item.id === id);
+    },
+    [context?.items]
+  );
+  const findByIntegration = useCallback2(
+    (integrationId) => {
+      return context?.items.filter((item) => item.integrationId === integrationId) ?? [];
+    },
+    [context?.items]
+  );
+  if (!context) {
+    return null;
+  }
+  return {
+    items: context.items,
+    loading: context.loading,
+    error: context.error,
+    isConnected: context.client !== null,
+    reload: context.reload,
+    create: context.createItem,
+    rotate: context.rotateItem,
+    remove: context.deleteItem,
+    getIntegrationFields: context.getIntegrationFields,
+    findItem,
+    findByIntegration
+  };
+}
+
 // src/schemas/auth-user.ts
 import { z } from "zod";
 import { UserIdentitySchema } from "mdxui/zod";
@@ -572,6 +1385,8 @@ export {
   Pipes,
   RadiusSchema,
   ScalingSchema,
+  SecretForm,
+  SecretsManager,
   SignInButton,
   SignOutButton,
   TeamSwitcher,
@@ -583,10 +1398,20 @@ export {
   UserSecurity,
   UserSessions,
   UsersManagement,
+  VaultDeleteDialog,
+  VaultEmptyState,
+  VaultInputModal,
+  VaultItemCard,
+  VaultList,
+  VaultProvider,
   WidgetsProvider,
   WidgetsProviderPropsSchema,
   useAuth6 as useAuth,
   useThemeDetection,
+  useVault,
+  useVaultContext,
+  useVaultContextOptional,
+  useVaultOptional,
   useWidgetToken
 };
 //# sourceMappingURL=index.js.map