@mdxui/auth 1.1.0 → 1.1.1

package/dist/providers/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/providers/identity-provider.tsx","../../src/providers/widgets-provider.tsx","../../src/providers/auth-gate.tsx"],"sourcesContent":["'use client'\n\nimport { AuthKitProvider } from '@workos-inc/authkit-react'\nimport type { IdentityProviderProps } from '../types/auth'\nimport { WidgetsProvider } from './widgets-provider'\n\n/**\n * Identity provider that wraps your app with WorkOS AuthKit authentication.\n *\n * This provider sets up authentication context for your application and\n * automatically includes the WidgetsProvider for WorkOS widgets.\n *\n * @example\n * ```tsx\n * import { IdentityProvider } from '@mdxui/auth'\n *\n * function App() {\n *   return (\n *     <IdentityProvider\n *       clientId=\"client_xxx\"\n *       devMode={process.env.NODE_ENV === 'development'}\n *     >\n *       <YourApp />\n *     </IdentityProvider>\n *   )\n * }\n * ```\n *\n * @example\n * ```tsx\n * // With custom redirect URI\n * <IdentityProvider\n *   clientId=\"client_xxx\"\n *   redirectUri=\"https://app.example.com/dashboard\"\n *   onRedirectCallback={() => {\n *     // Custom callback after auth redirect\n *   }}\n * >\n *   <YourApp />\n * </IdentityProvider>\n * ```\n */\nexport function IdentityProvider({\n  clientId,\n  apiHostname,\n  devMode,\n  redirectUri,\n  onRedirectCallback,\n  children,\n}: IdentityProviderProps) {\n  // Build redirect URI - defaults to current origin\n  const resolvedRedirectUri =\n    redirectUri ??\n    (typeof window !== 'undefined' ? window.location.origin : undefined)\n\n  // Default redirect callback - clear auth params from URL\n  const handleRedirectCallback =\n    onRedirectCallback ??\n    (() => {\n      if (typeof window !== 'undefined') {\n        const url = new URL(window.location.href)\n        url.searchParams.delete('code')\n        url.searchParams.delete('state')\n        window.history.replaceState({}, '', url.pathname)\n      }\n    })\n\n  return (\n    <AuthKitProvider\n      clientId={clientId}\n      apiHostname={apiHostname}\n      devMode={devMode}\n      redirectUri={resolvedRedirectUri}\n      onRedirectCallback={handleRedirectCallback}\n    >\n      <WidgetsProvider>{children}</WidgetsProvider>\n    </AuthKitProvider>\n  )\n}\n\n/**\n * Minimal identity provider without WidgetsProvider\n *\n * Use this if you want to set up widgets separately or don't need them.\n *\n * @example\n * ```tsx\n * import { IdentityProviderMinimal, WidgetsProvider } from '@mdxui/auth'\n *\n * function App() {\n *   return (\n *     <IdentityProviderMinimal clientId=\"client_xxx\">\n *       <WidgetsProvider appearance=\"dark\">\n *         <YourApp />\n *       </WidgetsProvider>\n *     </IdentityProviderMinimal>\n *   )\n * }\n * ```\n */\nexport function IdentityProviderMinimal({\n  clientId,\n  apiHostname,\n  devMode,\n  redirectUri,\n  onRedirectCallback,\n  children,\n}: IdentityProviderProps) {\n  const resolvedRedirectUri =\n    redirectUri ??\n    (typeof window !== 'undefined' ? window.location.origin : undefined)\n\n  const handleRedirectCallback =\n    onRedirectCallback ??\n    (() => {\n      if (typeof window !== 'undefined') {\n        const url = new URL(window.location.href)\n        url.searchParams.delete('code')\n        url.searchParams.delete('state')\n        window.history.replaceState({}, '', url.pathname)\n      }\n    })\n\n  return (\n    <AuthKitProvider\n      clientId={clientId}\n      apiHostname={apiHostname}\n      devMode={devMode}\n      redirectUri={resolvedRedirectUri}\n      onRedirectCallback={handleRedirectCallback}\n    >\n      {children}\n    </AuthKitProvider>\n  )\n}\n","'use client'\n\nimport { WorkOsWidgets } from '@workos-inc/widgets'\nimport { useEffect, useState } from 'react'\nimport type { WidgetsProviderProps } from '../types/auth'\n\n/**\n * Hook to detect dark mode from document class or system preference\n *\n * @returns Object with isDark state and mounted flag\n *\n * @example\n * ```tsx\n * const { isDark, mounted } = useThemeDetection()\n * const appearance = mounted ? (isDark ? 'dark' : 'light') : 'inherit'\n * ```\n */\nexport function useThemeDetection() {\n  const [mounted, setMounted] = useState(false)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    setMounted(true)\n\n    const checkDarkMode = () => {\n      const isDarkClass = document.documentElement.classList.contains('dark')\n      const prefersDark = window.matchMedia(\n        '(prefers-color-scheme: dark)'\n      ).matches\n      setIsDark(\n        isDarkClass ||\n          (!document.documentElement.classList.contains('light') && prefersDark)\n      )\n    }\n\n    checkDarkMode()\n\n    // Watch for class changes on html element\n    const observer = new MutationObserver(checkDarkMode)\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['class'],\n    })\n\n    // Watch for system preference changes\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n    mediaQuery.addEventListener('change', checkDarkMode)\n\n    return () => {\n      observer.disconnect()\n      mediaQuery.removeEventListener('change', checkDarkMode)\n    }\n  }, [])\n\n  return { isDark, mounted }\n}\n\n/**\n * Provider for WorkOS widgets with automatic theme detection\n *\n * Wraps children with WorkOsWidgets context and automatically detects\n * light/dark mode from document classes or system preference.\n *\n * @example\n * ```tsx\n * import { WidgetsProvider } from '@mdxui/auth'\n * import { UserProfile } from '@mdxui/auth/widgets'\n *\n * function App() {\n *   return (\n *     <WidgetsProvider>\n *       <UserProfile authToken={getAccessToken} />\n *     </WidgetsProvider>\n *   )\n * }\n * ```\n *\n * @example\n * ```tsx\n * // With explicit theme\n * <WidgetsProvider appearance=\"dark\" radius=\"large\">\n *   <UserProfile authToken={token} />\n * </WidgetsProvider>\n * ```\n */\nexport function WidgetsProvider({\n  children,\n  appearance,\n  radius = 'medium',\n  scaling = '100%',\n}: WidgetsProviderProps) {\n  const { isDark, mounted } = useThemeDetection()\n\n  // Use provided appearance, or auto-detect from theme\n  // Use \"inherit\" until mounted to avoid hydration mismatch\n  const resolvedAppearance =\n    appearance ?? (mounted ? (isDark ? 'dark' : 'light') : 'inherit')\n\n  return (\n    <WorkOsWidgets\n      theme={{\n        appearance: resolvedAppearance,\n        radius,\n        scaling,\n      }}\n      elements={{\n        primaryButton: {\n          variant: 'solid',\n        },\n        secondaryButton: {\n          variant: 'outline',\n        },\n      }}\n    >\n      {children}\n    </WorkOsWidgets>\n  )\n}\n","'use client'\n\nimport { useAuth } from '@workos-inc/authkit-react'\nimport type { AuthGateProps } from '../types/auth'\n\n/**\n * Default loading component shown while checking authentication\n */\nfunction DefaultLoadingComponent() {\n  return (\n    <div className=\"min-h-screen bg-background flex items-center justify-center\">\n      <div className=\"flex flex-col items-center gap-4\">\n        <div className=\"h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent\" />\n        <p className=\"text-sm text-muted-foreground\">Loading...</p>\n      </div>\n    </div>\n  )\n}\n\n/**\n * Default landing page component shown when user is not authenticated\n */\nfunction DefaultLandingPage() {\n  const { signIn } = useAuth()\n\n  return (\n    <div className=\"min-h-screen bg-background flex flex-col items-center justify-center p-4\">\n      <div className=\"text-center max-w-md\">\n        <h1 className=\"text-3xl font-bold tracking-tight mb-4\">Welcome</h1>\n        <p className=\"text-muted-foreground mb-8\">\n          Sign in to access your dashboard.\n        </p>\n        <button\n          type=\"button\"\n          onClick={() => signIn()}\n          className=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-md)] text-sm font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-6\"\n        >\n          Sign In\n        </button>\n      </div>\n    </div>\n  )\n}\n\n/**\n * AuthGate handles authentication state and shows appropriate UI:\n * - Loading state while checking auth\n * - Landing page or redirect when not authenticated\n * - Children (protected content) when authenticated\n *\n * @example\n * ```tsx\n * import { AuthGate } from '@mdxui/auth'\n *\n * function App() {\n *   return (\n *     <AuthGate>\n *       <ProtectedDashboard />\n *     </AuthGate>\n *   )\n * }\n * ```\n *\n * @example\n * ```tsx\n * // With custom components\n * <AuthGate\n *   loadingComponent={<CustomSpinner />}\n *   landingComponent={<CustomLandingPage />}\n * >\n *   <Dashboard />\n * </AuthGate>\n * ```\n *\n * @example\n * ```tsx\n * // Allow unauthenticated access\n * <AuthGate required={false}>\n *   <PublicContent />\n * </AuthGate>\n * ```\n *\n * @example\n * ```tsx\n * // Redirect to external URL when not authenticated\n * <AuthGate\n *   onUnauthenticated=\"redirect\"\n *   redirectUrl=\"https://marketing.example.com\"\n * >\n *   <Dashboard />\n * </AuthGate>\n * ```\n */\nexport function AuthGate({\n  children,\n  required = true,\n  loadingComponent,\n  landingComponent,\n  onUnauthenticated = 'landing',\n  redirectUrl,\n}: AuthGateProps) {\n  const { user, isLoading } = useAuth()\n\n  // If auth is not required, always show children\n  if (!required) {\n    return <>{children}</>\n  }\n\n  // Show loading state while checking authentication\n  if (isLoading) {\n    return <>{loadingComponent ?? <DefaultLoadingComponent />}</>\n  }\n\n  // User is authenticated, show protected content\n  if (user) {\n    return <>{children}</>\n  }\n\n  // User is not authenticated - handle based on config\n  switch (onUnauthenticated) {\n    case 'redirect':\n      // Redirect to external URL\n      if (redirectUrl && typeof window !== 'undefined') {\n        window.location.href = redirectUrl\n        return (\n          <div className=\"min-h-screen bg-background flex items-center justify-center\">\n            <p className=\"text-sm text-muted-foreground\">Redirecting...</p>\n          </div>\n        )\n      }\n      // Fall through to landing if no redirect URL\n      return <>{landingComponent ?? <DefaultLandingPage />}</>\n\n    case 'allow':\n      // Allow access even without auth (shows children)\n      return <>{children}</>\n\n    case 'landing':\n    default:\n      // Show landing page (custom or default)\n      return <>{landingComponent ?? <DefaultLandingPage />}</>\n  }\n}\n"],"mappings":"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","names":["jsx","jsx"]}
+{"version":3,"sources":["../../src/providers/identity-provider.tsx","../../src/providers/widgets-provider.tsx","../../src/providers/auth-gate.tsx","../../src/providers/vault-provider.tsx"],"sourcesContent":["'use client'\n\nimport { AuthKitProvider } from '@workos-inc/authkit-react'\nimport type { IdentityProviderProps } from '../types/auth'\nimport { WidgetsProvider } from './widgets-provider'\n\n/**\n * Identity provider that wraps your app with WorkOS AuthKit authentication.\n *\n * This provider sets up authentication context for your application and\n * automatically includes the WidgetsProvider for WorkOS widgets.\n *\n * @example\n * ```tsx\n * import { IdentityProvider } from '@mdxui/auth'\n *\n * function App() {\n *   return (\n *     <IdentityProvider\n *       clientId=\"client_xxx\"\n *       devMode={process.env.NODE_ENV === 'development'}\n *     >\n *       <YourApp />\n *     </IdentityProvider>\n *   )\n * }\n * ```\n *\n * @example\n * ```tsx\n * // With custom redirect URI\n * <IdentityProvider\n *   clientId=\"client_xxx\"\n *   redirectUri=\"https://app.example.com/dashboard\"\n *   onRedirectCallback={() => {\n *     // Custom callback after auth redirect\n *   }}\n * >\n *   <YourApp />\n * </IdentityProvider>\n * ```\n */\nexport function IdentityProvider({\n  clientId,\n  apiHostname,\n  devMode,\n  redirectUri,\n  onRedirectCallback,\n  children,\n}: IdentityProviderProps) {\n  // Build redirect URI - defaults to current origin\n  const resolvedRedirectUri =\n    redirectUri ??\n    (typeof window !== 'undefined' ? window.location.origin : undefined)\n\n  // Default redirect callback - clear auth params from URL\n  const handleRedirectCallback =\n    onRedirectCallback ??\n    (() => {\n      if (typeof window !== 'undefined') {\n        const url = new URL(window.location.href)\n        url.searchParams.delete('code')\n        url.searchParams.delete('state')\n        window.history.replaceState({}, '', url.pathname)\n      }\n    })\n\n  return (\n    <AuthKitProvider\n      clientId={clientId}\n      apiHostname={apiHostname}\n      devMode={devMode}\n      redirectUri={resolvedRedirectUri}\n      onRedirectCallback={handleRedirectCallback}\n    >\n      <WidgetsProvider>{children}</WidgetsProvider>\n    </AuthKitProvider>\n  )\n}\n\n/**\n * Minimal identity provider without WidgetsProvider\n *\n * Use this if you want to set up widgets separately or don't need them.\n *\n * @example\n * ```tsx\n * import { IdentityProviderMinimal, WidgetsProvider } from '@mdxui/auth'\n *\n * function App() {\n *   return (\n *     <IdentityProviderMinimal clientId=\"client_xxx\">\n *       <WidgetsProvider appearance=\"dark\">\n *         <YourApp />\n *       </WidgetsProvider>\n *     </IdentityProviderMinimal>\n *   )\n * }\n * ```\n */\nexport function IdentityProviderMinimal({\n  clientId,\n  apiHostname,\n  devMode,\n  redirectUri,\n  onRedirectCallback,\n  children,\n}: IdentityProviderProps) {\n  const resolvedRedirectUri =\n    redirectUri ??\n    (typeof window !== 'undefined' ? window.location.origin : undefined)\n\n  const handleRedirectCallback =\n    onRedirectCallback ??\n    (() => {\n      if (typeof window !== 'undefined') {\n        const url = new URL(window.location.href)\n        url.searchParams.delete('code')\n        url.searchParams.delete('state')\n        window.history.replaceState({}, '', url.pathname)\n      }\n    })\n\n  return (\n    <AuthKitProvider\n      clientId={clientId}\n      apiHostname={apiHostname}\n      devMode={devMode}\n      redirectUri={resolvedRedirectUri}\n      onRedirectCallback={handleRedirectCallback}\n    >\n      {children}\n    </AuthKitProvider>\n  )\n}\n","'use client'\n\nimport { WorkOsWidgets } from '@workos-inc/widgets'\nimport { useEffect, useState } from 'react'\nimport type { WidgetsProviderProps } from '../types/auth'\n\n/**\n * Hook to detect dark mode from document class or system preference\n *\n * @returns Object with isDark state and mounted flag\n *\n * @example\n * ```tsx\n * const { isDark, mounted } = useThemeDetection()\n * const appearance = mounted ? (isDark ? 'dark' : 'light') : 'inherit'\n * ```\n */\nexport function useThemeDetection() {\n  const [mounted, setMounted] = useState(false)\n  const [isDark, setIsDark] = useState(false)\n\n  useEffect(() => {\n    setMounted(true)\n\n    const checkDarkMode = () => {\n      const isDarkClass = document.documentElement.classList.contains('dark')\n      const prefersDark = window.matchMedia(\n        '(prefers-color-scheme: dark)'\n      ).matches\n      setIsDark(\n        isDarkClass ||\n          (!document.documentElement.classList.contains('light') && prefersDark)\n      )\n    }\n\n    checkDarkMode()\n\n    // Watch for class changes on html element\n    const observer = new MutationObserver(checkDarkMode)\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['class'],\n    })\n\n    // Watch for system preference changes\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n    mediaQuery.addEventListener('change', checkDarkMode)\n\n    return () => {\n      observer.disconnect()\n      mediaQuery.removeEventListener('change', checkDarkMode)\n    }\n  }, [])\n\n  return { isDark, mounted }\n}\n\n/**\n * Provider for WorkOS widgets with automatic theme detection\n *\n * Wraps children with WorkOsWidgets context and automatically detects\n * light/dark mode from document classes or system preference.\n *\n * @example\n * ```tsx\n * import { WidgetsProvider } from '@mdxui/auth'\n * import { UserProfile } from '@mdxui/auth/widgets'\n *\n * function App() {\n *   return (\n *     <WidgetsProvider>\n *       <UserProfile authToken={getAccessToken} />\n *     </WidgetsProvider>\n *   )\n * }\n * ```\n *\n * @example\n * ```tsx\n * // With explicit theme\n * <WidgetsProvider appearance=\"dark\" radius=\"large\">\n *   <UserProfile authToken={token} />\n * </WidgetsProvider>\n * ```\n */\nexport function WidgetsProvider({\n  children,\n  appearance,\n  radius = 'medium',\n  scaling = '100%',\n}: WidgetsProviderProps) {\n  const { isDark, mounted } = useThemeDetection()\n\n  // Use provided appearance, or auto-detect from theme\n  // Use \"inherit\" until mounted to avoid hydration mismatch\n  const resolvedAppearance =\n    appearance ?? (mounted ? (isDark ? 'dark' : 'light') : 'inherit')\n\n  return (\n    <WorkOsWidgets\n      theme={{\n        appearance: resolvedAppearance,\n        radius,\n        scaling,\n      }}\n      elements={{\n        primaryButton: {\n          variant: 'solid',\n        },\n        secondaryButton: {\n          variant: 'outline',\n        },\n      }}\n    >\n      {children}\n    </WorkOsWidgets>\n  )\n}\n","'use client'\n\nimport { useAuth } from '@workos-inc/authkit-react'\nimport type { AuthGateProps } from '../types/auth'\n\n/**\n * Default loading component shown while checking authentication\n */\nfunction DefaultLoadingComponent() {\n  return (\n    <div className=\"min-h-screen bg-background flex items-center justify-center\">\n      <div className=\"flex flex-col items-center gap-4\">\n        <div className=\"h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent\" />\n        <p className=\"text-sm text-muted-foreground\">Loading...</p>\n      </div>\n    </div>\n  )\n}\n\n/**\n * Default landing page component shown when user is not authenticated\n */\nfunction DefaultLandingPage() {\n  const { signIn } = useAuth()\n\n  return (\n    <div className=\"min-h-screen bg-background flex flex-col items-center justify-center p-4\">\n      <div className=\"text-center max-w-md\">\n        <h1 className=\"text-3xl font-bold tracking-tight mb-4\">Welcome</h1>\n        <p className=\"text-muted-foreground mb-8\">\n          Sign in to access your dashboard.\n        </p>\n        <button\n          type=\"button\"\n          onClick={() => signIn()}\n          className=\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-md)] text-sm font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-6\"\n        >\n          Sign In\n        </button>\n      </div>\n    </div>\n  )\n}\n\n/**\n * AuthGate handles authentication state and shows appropriate UI:\n * - Loading state while checking auth\n * - Landing page or redirect when not authenticated\n * - Children (protected content) when authenticated\n *\n * @example\n * ```tsx\n * import { AuthGate } from '@mdxui/auth'\n *\n * function App() {\n *   return (\n *     <AuthGate>\n *       <ProtectedDashboard />\n *     </AuthGate>\n *   )\n * }\n * ```\n *\n * @example\n * ```tsx\n * // With custom components\n * <AuthGate\n *   loadingComponent={<CustomSpinner />}\n *   landingComponent={<CustomLandingPage />}\n * >\n *   <Dashboard />\n * </AuthGate>\n * ```\n *\n * @example\n * ```tsx\n * // Allow unauthenticated access\n * <AuthGate required={false}>\n *   <PublicContent />\n * </AuthGate>\n * ```\n *\n * @example\n * ```tsx\n * // Redirect to external URL when not authenticated\n * <AuthGate\n *   onUnauthenticated=\"redirect\"\n *   redirectUrl=\"https://marketing.example.com\"\n * >\n *   <Dashboard />\n * </AuthGate>\n * ```\n */\nexport function AuthGate({\n  children,\n  required = true,\n  loadingComponent,\n  landingComponent,\n  onUnauthenticated = 'landing',\n  redirectUrl,\n}: AuthGateProps) {\n  const { user, isLoading } = useAuth()\n\n  // If auth is not required, always show children\n  if (!required) {\n    return <>{children}</>\n  }\n\n  // Show loading state while checking authentication\n  if (isLoading) {\n    return <>{loadingComponent ?? <DefaultLoadingComponent />}</>\n  }\n\n  // User is authenticated, show protected content\n  if (user) {\n    return <>{children}</>\n  }\n\n  // User is not authenticated - handle based on config\n  switch (onUnauthenticated) {\n    case 'redirect':\n      // Redirect to external URL\n      if (redirectUrl && typeof window !== 'undefined') {\n        window.location.href = redirectUrl\n        return (\n          <div className=\"min-h-screen bg-background flex items-center justify-center\">\n            <p className=\"text-sm text-muted-foreground\">Redirecting...</p>\n          </div>\n        )\n      }\n      // Fall through to landing if no redirect URL\n      return <>{landingComponent ?? <DefaultLandingPage />}</>\n\n    case 'allow':\n      // Allow access even without auth (shows children)\n      return <>{children}</>\n\n    case 'landing':\n    default:\n      // Show landing page (custom or default)\n      return <>{landingComponent ?? <DefaultLandingPage />}</>\n  }\n}\n","'use client'\n\nimport { createContext, useContext, useMemo, type ReactNode } from 'react'\nimport type { VaultItem, VaultField } from '../vault/types'\n\n/**\n * Vault client interface\n *\n * Defines the contract for a vault backend. The actual implementation\n * can be provided by vault.do SDK or any other vault service.\n */\nexport interface VaultClient {\n  /** List all vault items */\n  list: () => Promise<VaultItem[]>\n  /** Create a new vault item */\n  create: (integrationId: string, credentials: Record<string, string>) => Promise<VaultItem>\n  /** Rotate credentials for an existing vault item */\n  rotate: (id: string, credentials: Record<string, string>) => Promise<VaultItem>\n  /** Delete a vault item */\n  delete: (id: string) => Promise<void>\n  /** Get field configuration for an integration */\n  getIntegrationFields?: (integrationId: string) => VaultField[]\n}\n\n/**\n * Vault context state\n */\nexport interface VaultContextState {\n  /** The vault client instance */\n  client: VaultClient | null\n  /** Vault items currently loaded */\n  items: VaultItem[]\n  /** Whether the vault is currently loading */\n  loading: boolean\n  /** Error message if vault operations failed */\n  error: string | null\n  /** Reload vault items */\n  reload: () => Promise<void>\n  /** Create a new vault item */\n  createItem: (integrationId: string, credentials: Record<string, string>) => Promise<void>\n  /** Rotate credentials for an existing item */\n  rotateItem: (id: string, credentials: Record<string, string>) => Promise<void>\n  /** Delete a vault item */\n  deleteItem: (id: string) => Promise<void>\n  /** Get field configuration for an integration */\n  getIntegrationFields: (integrationId: string) => VaultField[]\n}\n\nconst VaultContext = createContext<VaultContextState | null>(null)\n\n/**\n * Props for VaultProvider\n */\nexport interface VaultProviderProps {\n  /** Children to render */\n  children: ReactNode\n  /** Optional vault client implementation */\n  client?: VaultClient\n  /** Initial items to display (for SSR or static rendering) */\n  initialItems?: VaultItem[]\n}\n\n/**\n * Default fields for unknown integrations\n */\nconst defaultFields: VaultField[] = [\n  { key: 'api_key', label: 'API Key', type: 'password', required: true }\n]\n\n/**\n * Provider for vault state and operations\n *\n * Provides context for vault components to access the vault client\n * and perform CRUD operations on credentials.\n *\n * The actual vault.do SDK integration will be done in vault.do/react.\n * This provider is designed to be a generic wrapper that can work\n * with any vault backend implementation.\n *\n * @example\n * ```tsx\n * import { VaultProvider } from '@mdxui/auth'\n *\n * // Basic usage with a custom client\n * function App() {\n *   return (\n *     <VaultProvider client={myVaultClient}>\n *       <VaultDashboard />\n *     </VaultProvider>\n *   )\n * }\n *\n * // Static/SSR usage with initial items\n * function App() {\n *   return (\n *     <VaultProvider initialItems={serverSideItems}>\n *       <VaultDashboard />\n *     </VaultProvider>\n *   )\n * }\n * ```\n */\nexport function VaultProvider({\n  children,\n  client,\n  initialItems = [],\n}: VaultProviderProps) {\n  // Note: In a real implementation, this would use useState and useEffect\n  // to manage state and load items from the client. For now, we provide\n  // a basic structure that the vault.do SDK can extend.\n\n  const contextValue = useMemo<VaultContextState>(() => {\n    const getIntegrationFields = (integrationId: string): VaultField[] => {\n      if (client?.getIntegrationFields) {\n        return client.getIntegrationFields(integrationId)\n      }\n      return defaultFields\n    }\n\n    return {\n      client: client ?? null,\n      items: initialItems,\n      loading: false,\n      error: null,\n      reload: async () => {\n        if (!client) {\n          console.warn('VaultProvider: No client provided, cannot reload')\n          return\n        }\n        // Implementation would update state here\n        await client.list()\n      },\n      createItem: async (integrationId, credentials) => {\n        if (!client) {\n          throw new Error('VaultProvider: No client provided')\n        }\n        await client.create(integrationId, credentials)\n      },\n      rotateItem: async (id, credentials) => {\n        if (!client) {\n          throw new Error('VaultProvider: No client provided')\n        }\n        await client.rotate(id, credentials)\n      },\n      deleteItem: async (id) => {\n        if (!client) {\n          throw new Error('VaultProvider: No client provided')\n        }\n        await client.delete(id)\n      },\n      getIntegrationFields,\n    }\n  }, [client, initialItems])\n\n  return (\n    <VaultContext.Provider value={contextValue}>\n      {children}\n    </VaultContext.Provider>\n  )\n}\n\n/**\n * Hook to access vault context\n *\n * Must be used within a VaultProvider.\n *\n * @throws Error if used outside of VaultProvider\n */\nexport function useVaultContext(): VaultContextState {\n  const context = useContext(VaultContext)\n  if (!context) {\n    throw new Error('useVaultContext must be used within a VaultProvider')\n  }\n  return context\n}\n\n/**\n * Hook to optionally access vault context\n *\n * Returns null if not within a VaultProvider.\n */\nexport function useVaultContextOptional(): VaultContextState | null {\n  return useContext(VaultContext)\n}\n"],"mappings":"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","names":["jsx","jsx","jsx"]}

package/dist/types-8tixck1H.d.ts

@@ -0,0 +1,123 @@
+/**
+ * Vault Types
+ *
+ * Types for vault UI components. These are standalone types that work
+ * with any vault backend - the actual vault.do SDK integration will
+ * be done in vault.do/react.
+ */
+/**
+ * Represents a stored credential item in the vault
+ */
+interface VaultItem {
+    /** Unique identifier for the vault item */
+    id: string;
+    /** Display name for the credential (e.g., "OpenAI", "GitHub") */
+    name: string;
+    /** Integration identifier for field configuration lookup */
+    integrationId: string;
+    /** Optional logo URL for the integration */
+    logoUrl?: string;
+    /** When the credential was first created */
+    createdAt: Date;
+    /** When the credential was last updated/rotated */
+    updatedAt: Date;
+}
+/**
+ * Field definition for credential input forms
+ */
+interface VaultField {
+    /** Field key used in the credentials object */
+    key: string;
+    /** Human-readable label for the field */
+    label: string;
+    /** Input type for the field */
+    type: 'text' | 'password';
+    /** Whether the field is required */
+    required: boolean;
+    /** Optional placeholder text */
+    placeholder?: string;
+}
+/**
+ * Integration definition for credential forms
+ */
+interface VaultIntegration {
+    /** Integration identifier */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Optional logo URL */
+    logoUrl?: string;
+    /** Fields required for this integration */
+    fields: VaultField[];
+}
+/**
+ * Props for vault list component
+ */
+interface VaultListProps {
+    /** List of vault items to display */
+    items: VaultItem[];
+    /** Handler for rotating credentials */
+    onRotate: (id: string, credentials: Record<string, string>) => Promise<void>;
+    /** Handler for deleting credentials */
+    onDelete: (id: string) => Promise<void>;
+    /** Handler to open the add modal */
+    onOpenAddModal: () => void;
+    /** Function to get integration fields for a given integration ID */
+    getIntegrationFields?: (integrationId: string) => VaultField[];
+}
+/**
+ * Props for vault item card component
+ */
+interface VaultItemCardProps {
+    /** Unique identifier */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Optional logo URL */
+    logoUrl?: string;
+    /** Creation date */
+    createdAt: Date;
+    /** Last update date */
+    updatedAt: Date;
+    /** Handler for rotate action */
+    onRotate: (id: string) => void;
+    /** Handler for delete action */
+    onDelete: (id: string) => void;
+}
+/**
+ * Props for vault input modal component
+ */
+interface VaultInputModalProps {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Handler to close the modal */
+    onClose: () => void;
+    /** Whether creating new or rotating existing credentials */
+    mode: 'create' | 'rotate';
+    /** Integration to configure */
+    integration?: VaultIntegration;
+    /** Handler to save credentials */
+    onSave: (credentials: Record<string, string>) => Promise<void>;
+}
+/**
+ * Props for vault delete dialog component
+ */
+interface VaultDeleteDialogProps {
+    /** Whether the dialog is open */
+    isOpen: boolean;
+    /** Handler to close the dialog */
+    onClose: () => void;
+    /** Name of the item being deleted */
+    itemName: string;
+    /** Handler to confirm deletion */
+    onConfirm: () => void;
+}
+/**
+ * Props for vault empty state component
+ */
+interface VaultEmptyStateProps {
+    /** Handler for add credential action */
+    onAddCredential: () => void;
+}
+
+export type { VaultItem as V, VaultField as a, VaultIntegration as b, VaultListProps as c, VaultItemCardProps as d, VaultInputModalProps as e, VaultDeleteDialogProps as f, VaultEmptyStateProps as g };

package/dist/vault/index.d.ts

@@ -0,0 +1,192 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { f as VaultDeleteDialogProps, g as VaultEmptyStateProps, e as VaultInputModalProps, d as VaultItemCardProps, c as VaultListProps } from '../types-8tixck1H.js';
+export { a as VaultField, b as VaultIntegration, V as VaultItem } from '../types-8tixck1H.js';
+
+/**
+ * Secret type for vault secret management
+ */
+interface Secret {
+    id: string;
+    key: string;
+    value: string;
+    description?: string;
+    environment?: string;
+    tags?: string[];
+    createdAt: Date;
+    updatedAt: Date;
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Props for the SecretsManager component
+ */
+interface SecretsManagerProps {
+    /**
+     * Secrets to display
+     */
+    secrets?: Secret[];
+    /**
+     * Available environments
+     */
+    environments?: string[];
+    /**
+     * Current environment filter
+     */
+    currentEnvironment?: string;
+    /**
+     * Callback when environment changes
+     */
+    onEnvironmentChange?: (environment: string) => void;
+    /**
+     * Callback when a secret is created
+     */
+    onCreate?: (secret: Omit<Secret, "id" | "createdAt" | "updatedAt">) => void | Promise<void>;
+    /**
+     * Callback when a secret is updated
+     */
+    onUpdate?: (id: string, secret: Partial<Secret>) => void | Promise<void>;
+    /**
+     * Callback when a secret is deleted
+     */
+    onDelete?: (id: string) => void | Promise<void>;
+    /**
+     * Whether values are initially hidden
+     * @default true
+     */
+    hideValues?: boolean;
+    /**
+     * Whether to allow editing
+     * @default true
+     */
+    editable?: boolean;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+
+/**
+ * SecretsManager Component
+ *
+ * A comprehensive UI for managing application secrets and environment variables.
+ * Provides features for creating, editing, deleting, and viewing secrets with
+ * support for multiple environments.
+ *
+ * @example
+ * ```tsx
+ * import { SecretsManager } from '@mdxui/auth'
+ *
+ * function VaultPage() {
+ *   return (
+ *     <SecretsManager
+ *       secrets={secrets}
+ *       environments={['development', 'staging', 'production']}
+ *       onCreate={handleCreate}
+ *       onUpdate={handleUpdate}
+ *       onDelete={handleDelete}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+declare function SecretsManager({ secrets: externalSecrets, environments, currentEnvironment, onEnvironmentChange, onCreate, onUpdate, onDelete, hideValues: initialHideValues, editable, className, }: SecretsManagerProps): react_jsx_runtime.JSX.Element;
+
+interface SecretFormProps {
+    secret?: Secret;
+    environment: string;
+    environments: string[];
+    onSubmit: (secret: Omit<Secret, "id" | "createdAt" | "updatedAt">) => void;
+    onCancel: () => void;
+}
+declare function SecretForm({ secret, environment: defaultEnvironment, environments, onSubmit, onCancel, }: SecretFormProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Confirmation dialog for deleting vault credentials
+ *
+ * @example
+ * ```tsx
+ * <VaultDeleteDialog
+ *   isOpen={deleteDialogOpen}
+ *   onClose={() => setDeleteDialogOpen(false)}
+ *   itemName="OpenAI"
+ *   onConfirm={handleDelete}
+ * />
+ * ```
+ */
+declare function VaultDeleteDialog({ isOpen, onClose, itemName, onConfirm }: VaultDeleteDialogProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Empty state component shown when the vault has no credentials
+ *
+ * @example
+ * ```tsx
+ * <VaultEmptyState onAddCredential={() => setAddModalOpen(true)} />
+ * ```
+ */
+declare function VaultEmptyState({ onAddCredential }: VaultEmptyStateProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Modal for entering or rotating vault credentials
+ *
+ * Renders input fields based on the integration's field configuration.
+ * Supports both creating new credentials and rotating existing ones.
+ *
+ * @example
+ * ```tsx
+ * <VaultInputModal
+ *   isOpen={modalOpen}
+ *   onClose={() => setModalOpen(false)}
+ *   mode="create"
+ *   integration={{
+ *     id: 'openai',
+ *     name: 'OpenAI',
+ *     logoUrl: '...',
+ *     fields: [{ key: 'api_key', label: 'API Key', type: 'password', required: true }]
+ *   }}
+ *   onSave={(credentials) => saveCredentials(credentials)}
+ * />
+ * ```
+ */
+declare function VaultInputModal({ isOpen, onClose, mode, integration, onSave, }: VaultInputModalProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Card component displaying a single vault credential item
+ *
+ * Shows the integration logo/icon, name, and creation/rotation date.
+ * Provides a dropdown menu with rotate and delete actions.
+ *
+ * @example
+ * ```tsx
+ * <VaultItemCard
+ *   id="1"
+ *   name="OpenAI"
+ *   logoUrl="https://..."
+ *   createdAt={new Date('2024-01-01')}
+ *   updatedAt={new Date('2024-06-01')}
+ *   onRotate={(id) => console.log('Rotate', id)}
+ *   onDelete={(id) => console.log('Delete', id)}
+ * />
+ * ```
+ */
+declare function VaultItemCard({ id, name, logoUrl, createdAt, updatedAt, onRotate, onDelete, }: VaultItemCardProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Main vault list component that displays stored credentials
+ *
+ * Includes the list view, delete confirmation dialog, and credential
+ * input modal for rotating credentials. Shows an empty state when
+ * no credentials are stored.
+ *
+ * @example
+ * ```tsx
+ * <VaultList
+ *   items={vaultItems}
+ *   onRotate={async (id, creds) => await rotateCredentials(id, creds)}
+ *   onDelete={async (id) => await deleteCredentials(id)}
+ *   onOpenAddModal={() => setAddModalOpen(true)}
+ *   getIntegrationFields={(id) => integrationFields[id]}
+ * />
+ * ```
+ */
+declare function VaultList({ items, onRotate, onDelete, onOpenAddModal, getIntegrationFields, }: VaultListProps): react_jsx_runtime.JSX.Element;
+
+export { type Secret, SecretForm, SecretsManager, type SecretsManagerProps, VaultDeleteDialog, VaultDeleteDialogProps, VaultEmptyState, VaultEmptyStateProps, VaultInputModal, VaultInputModalProps, VaultItemCard, VaultItemCardProps, VaultList, VaultListProps };