@sanity/sdk-react 0.0.0-alpha.3 → 0.0.0-alpha.4

package/README.md

@@ -5,7 +5,7 @@
   <h1 align="center">Sanity SDK - React</h1>
 </p>
 
-React components and hooks for creating Sanity applications.
+React hooks for creating Sanity applications.
 
 ## Installation
 
@@ -34,7 +34,7 @@ npm run dev
 ```tsx
 // src/App.tsx
 import {createSanityInstance} from '@sanity/sdk'
-import {AuthBoundary, SanityProvider} from '@sanity/sdk-react/components'
+import {SanityProvider} from '@sanity/sdk-react/context'
 import {useCurrentUser, useLogOut} from '@sanity/sdk-react/hooks'
 import {Button, Flex, Spinner, Text, ThemeProvider} from '@sanity/ui'
 import {buildTheme} from '@sanity/ui/theme'
@@ -56,6 +56,7 @@ export function App(): JSX.Element {
     <ThemeProvider theme={theme}>
       <Suspense fallback={<Spinner />}>
         <SanityProvider sanityInstance={sanityInstance}>
+          {/* You will need to implement an auth boundary */}
           <AuthBoundary header={<Text>My Sanity App</Text>}>
             <Authenticated />
           </AuthBoundary>
@@ -80,10 +81,6 @@ function Authenticated() {
 export default App
 ```
 
-## Customizing your application
-
-If you would like to implement a custom look and feel, you can use the hooks in your own components.
-
 ## Available Hooks
 
 - `useAuthState` - Get current authentication state

package/dist/_chunks-es/context.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext } from "react";
+const SanityInstanceContext = createContext(null), SanityProvider = ({ children, sanityInstance }) => /* @__PURE__ */ jsx(SanityInstanceContext.Provider, { value: sanityInstance, children });
+export {
+  SanityInstanceContext,
+  SanityProvider
+};
+//# sourceMappingURL=context.js.map

package/dist/_chunks-es/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../src/context/SanityProvider.tsx"],"sourcesContent":["import {type SanityInstance} from '@sanity/sdk'\nimport {createContext, type ReactElement} from 'react'\n\n/**\n * @public\n */\nexport interface SanityProviderProps {\n  children: React.ReactNode\n  sanityInstance: SanityInstance\n}\n\nexport const SanityInstanceContext = createContext<SanityInstance | null>(null)\n\n/**\n * Top-level context provider that provides a Sanity configuration instance.\n * This must wrap any Sanity SDK React component.\n * @public\n * @param props - Sanity project and dataset configuration\n * @returns Rendered component\n * @example\n * ```tsx\n * import {createSanityInstance} from '@sanity/sdk'\n * import {ExampleComponent, SanityProvider} from '@sanity/sdk-react'\n *\n * const sanityInstance = createSanityInstance({projectId: 'your-project-id', dataset: 'production'})\n *\n * export default function MyApp() {\n *   return (\n *     <SanityProvider sanityInstance={sanityInstance}>\n *      <ExampleComponent />\n *     </SanityProvider>\n *   )\n * }\n * ```\n */\nexport const SanityProvider = ({children, sanityInstance}: SanityProviderProps): ReactElement => {\n  return (\n    <SanityInstanceContext.Provider value={sanityInstance}>\n      {children}\n    </SanityInstanceContext.Provider>\n  )\n}\n"],"names":[],"mappings":";;AAWO,MAAM,wBAAwB,cAAqC,IAAI,GAwBjE,iBAAiB,CAAC,EAAC,UAAU,eAAc,0BAEnD,sBAAsB,UAAtB,EAA+B,OAAO,gBACpC,SACH,CAAA;"}

package/dist/_chunks-es/useLogOut.js

@@ -1,7 +1,7 @@
-import { getAuthState, getLoginUrlsState, fetchLoginUrls, handleCallback, logout } from "@sanity/sdk";
-import { createContext, useContext, useMemo, useSyncExternalStore, useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
-const SanityInstanceContext = createContext(null), SanityProvider = ({ children, sanityInstance }) => /* @__PURE__ */ jsx(SanityInstanceContext.Provider, { value: sanityInstance, children }), useSanityInstance = () => {
+import { getAuthState, handleCallback, getLoginUrlsState, fetchLoginUrls, logout } from "@sanity/sdk";
+import { useContext, useMemo, useSyncExternalStore, useCallback } from "react";
+import { SanityInstanceContext } from "./context.js";
+const useSanityInstance = () => {
   const sanityInstance = useContext(SanityInstanceContext);
   if (!sanityInstance)
     throw new Error("useSanityInstance must be called from within the SanityProvider");
@@ -19,11 +19,6 @@ function createStateSourceHook(stateSourceFactory) {
   return useHook;
 }
 const useAuthState = createStateSourceHook(getAuthState);
-function useLoginUrls() {
-  const instance = useSanityInstance(), { subscribe, getCurrent } = useMemo(() => getLoginUrlsState(instance), [instance]);
-  if (!getCurrent()) throw fetchLoginUrls(instance);
-  return useSyncExternalStore(subscribe, getCurrent);
-}
 function createCallbackHook(callback) {
   function useHook() {
     const instance = useSanityInstance();
@@ -31,9 +26,14 @@ function createCallbackHook(callback) {
   }
   return useHook;
 }
-const useHandleCallback = createCallbackHook(handleCallback), useLogOut = createCallbackHook(logout);
+const useHandleCallback = createCallbackHook(handleCallback);
+function useLoginUrls() {
+  const instance = useSanityInstance(), { subscribe, getCurrent } = useMemo(() => getLoginUrlsState(instance), [instance]);
+  if (!getCurrent()) throw fetchLoginUrls(instance);
+  return useSyncExternalStore(subscribe, getCurrent);
+}
+const useLogOut = createCallbackHook(logout);
 export {
-  SanityProvider,
   createStateSourceHook,
   useAuthState,
   useHandleCallback,

package/dist/_chunks-es/useLogOut.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLogOut.js","sources":["../../src/components/context/SanityProvider.tsx","../../src/hooks/context/useSanityInstance.ts","../../src/hooks/helpers/createStateSourceHook.tsx","../../src/hooks/auth/useAuthState.tsx","../../src/hooks/auth/useLoginUrls.tsx","../../src/hooks/helpers/createCallbackHook.tsx","../../src/hooks/auth/useHandleCallback.tsx","../../src/hooks/auth/useLogOut.tsx"],"sourcesContent":["import {type SanityInstance} from '@sanity/sdk'\nimport {createContext, type ReactElement} from 'react'\n\n/**\n * @public\n */\nexport interface SanityProviderProps {\n  children: React.ReactNode\n  sanityInstance: SanityInstance\n}\n\nexport const SanityInstanceContext = createContext<SanityInstance | null>(null)\n\n/**\n * Top-level context provider that provides a Sanity configuration instance.\n * This must wrap any Sanity SDK React component.\n * @public\n * @param props - Sanity project and dataset configuration\n * @returns Rendered component\n * @example\n * ```tsx\n * import {createSanityInstance} from '@sanity/sdk'\n * import {ExampleComponent, SanityProvider} from '@sanity/sdk-react'\n *\n * const sanityInstance = createSanityInstance({projectId: 'your-project-id', dataset: 'production'})\n *\n * export default function MyApp() {\n *   return (\n *     <SanityProvider sanityInstance={sanityInstance}>\n *      <ExampleComponent />\n *     </SanityProvider>\n *   )\n * }\n * ```\n */\nexport const SanityProvider = ({children, sanityInstance}: SanityProviderProps): ReactElement => {\n  return (\n    <SanityInstanceContext.Provider value={sanityInstance}>\n      {children}\n    </SanityInstanceContext.Provider>\n  )\n}\n","import type {SanityInstance} from '@sanity/sdk'\nimport {useContext} from 'react'\n\nimport {SanityInstanceContext} from '../../components/context/SanityProvider'\n\n/**\n * Hook that provides the current Sanity instance from the context.\n * This must be called from within a `SanityProvider` component.\n * @public\n * @returns the current Sanity instance\n * @example\n * ```tsx\n * const instance = useSanityInstance()\n * ```\n */\nexport const useSanityInstance = (): SanityInstance => {\n  const sanityInstance = useContext(SanityInstanceContext)\n  if (!sanityInstance) {\n    throw new Error('useSanityInstance must be called from within the SanityProvider')\n  }\n\n  return sanityInstance\n}\n","import type {SanityInstance, StateSource} from '@sanity/sdk'\nimport {useMemo, useSyncExternalStore} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\nexport function createStateSourceHook<TParams extends unknown[], TState>(\n  stateSourceFactory: (instance: SanityInstance, ...params: TParams) => StateSource<TState>,\n): (...params: TParams) => TState {\n  function useHook(...params: TParams) {\n    const instance = useSanityInstance()\n    const {subscribe, getCurrent} = useMemo(\n      () => stateSourceFactory(instance, ...params),\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [instance, ...params],\n    )\n\n    return useSyncExternalStore(subscribe, getCurrent)\n  }\n\n  return useHook\n}\n","import {getAuthState} from '@sanity/sdk'\n\nimport {createStateSourceHook} from '../helpers/createStateSourceHook'\n\n/**\n * A React hook that subscribes to authentication state changes.\n *\n * This hook provides access to the current authentication state type from the Sanity auth store.\n * It automatically re-renders the component when the authentication state changes.\n *\n * @remarks\n * The hook uses `useSyncExternalStore` to safely subscribe to auth state changes\n * and ensure consistency between server and client rendering.\n *\n * @returns The current authentication state type\n *\n * @example\n * ```tsx\n * function AuthStatus() {\n *   const authState = useAuthState()\n *   return <div>Current auth state: {authState}</div>\n * }\n * ```\n *\n * @public\n */\nexport const useAuthState = createStateSourceHook(getAuthState)\n","import {type AuthProvider, fetchLoginUrls, getLoginUrlsState} from '@sanity/sdk'\nimport {useMemo, useSyncExternalStore} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * A React hook that retrieves the available authentication provider URLs for login.\n *\n * @remarks\n * This hook fetches the login URLs from the Sanity auth store when the component mounts.\n * Each provider object contains information about an authentication method, including its URL.\n * The hook will suspend if the login URLs have not yet loaded.\n *\n * @example\n * ```tsx\n * // LoginProviders component that uses the hook\n * function LoginProviders() {\n *   const providers = useLoginUrls()\n *\n *   return (\n *     <div>\n *       {providers.map((provider) => (\n *         <a key={provider.name} href={provider.url}>\n *           Login with {provider.title}\n *         </a>\n *       ))}\n *     </div>\n *   )\n * }\n *\n * // Parent component with Suspense boundary\n * function LoginPage() {\n *   return (\n *     <Suspense fallback={<div>Loading authentication providers...</div>}>\n *       <LoginProviders />\n *     </Suspense>\n *   )\n * }\n * ```\n *\n * @returns An array of {@link AuthProvider} objects containing login URLs and provider information\n * @public\n */\nexport function useLoginUrls(): AuthProvider[] {\n  const instance = useSanityInstance()\n  const {subscribe, getCurrent} = useMemo(() => getLoginUrlsState(instance), [instance])\n\n  if (!getCurrent()) throw fetchLoginUrls(instance)\n\n  return useSyncExternalStore(subscribe, getCurrent as () => AuthProvider[])\n}\n","import type {SanityInstance} from '@sanity/sdk'\nimport {useCallback} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\nexport function createCallbackHook<TParams extends unknown[], TReturn>(\n  callback: (instance: SanityInstance, ...params: TParams) => TReturn,\n): () => (...params: TParams) => TReturn {\n  function useHook() {\n    const instance = useSanityInstance()\n    return useCallback((...params: TParams) => callback(instance, ...params), [instance])\n  }\n\n  return useHook\n}\n","import {handleCallback} from '@sanity/sdk'\n\nimport {createCallbackHook} from '../helpers/createCallbackHook'\n\n/**\n * A React hook that returns a function for handling authentication callbacks.\n *\n * @remarks\n * This hook provides access to the authentication store's callback handler,\n * which processes auth redirects by extracting the session ID and fetching the\n * authentication token. If fetching the long-lived token is successful,\n * `handleCallback` will return a Promise that resolves a new location that\n * removes the short-lived token from the URL. Use this in combination with\n * `history.replaceState` or your own router's `replace` function to update the\n * current location without triggering a reload.\n *\n * @example\n * ```tsx\n * function AuthCallback() {\n *   const handleCallback = useHandleCallback()\n *   const router = useRouter() // Example router\n *\n *   useEffect(() => {\n *     async function processCallback() {\n *       // Handle the callback and get the cleaned URL\n *       const newUrl = await handleCallback(window.location.href)\n *\n *       if (newUrl) {\n *         // Replace URL without triggering navigation\n *         router.replace(newUrl, {shallow: true})\n *       }\n *     }\n *\n *     processCallback().catch(console.error)\n *   }, [handleCallback, router])\n *\n *   return <div>Completing login...</div>\n * }\n * ```\n *\n * @returns A callback handler function that processes OAuth redirects\n * @public\n */\nexport const useHandleCallback = createCallbackHook(handleCallback)\n","import {logout} from '@sanity/sdk'\n\nimport {createCallbackHook} from '../helpers/createCallbackHook'\n\n/**\n * Hook to log out of the current session\n * @public\n * @returns A function to log out of the current session\n */\nexport const useLogOut = createCallbackHook(logout)\n"],"names":[],"mappings":";;;AAWO,MAAM,wBAAwB,cAAqC,IAAI,GAwBjE,iBAAiB,CAAC,EAAC,UAAU,eAAc,0BAEnD,sBAAsB,UAAtB,EAA+B,OAAO,gBACpC,SACH,CAAA,GCxBS,oBAAoB,MAAsB;AAC/C,QAAA,iBAAiB,WAAW,qBAAqB;AACvD,MAAI,CAAC;AACG,UAAA,IAAI,MAAM,iEAAiE;AAG5E,SAAA;AACT;ACjBO,SAAS,sBACd,oBACgC;AAChC,WAAS,WAAW,QAAiB;AACnC,UAAM,WAAW,kBAAkB,GAC7B,EAAC,WAAW,WAAc,IAAA;AAAA,MAC9B,MAAM,mBAAmB,UAAU,GAAG,MAAM;AAAA;AAAA,MAE5C,CAAC,UAAU,GAAG,MAAM;AAAA,IACtB;AAEO,WAAA,qBAAqB,WAAW,UAAU;AAAA,EAAA;AAG5C,SAAA;AACT;ACMa,MAAA,eAAe,sBAAsB,YAAY;ACiBvD,SAAS,eAA+B;AAC7C,QAAM,WAAW,qBACX,EAAC,WAAW,WAAU,IAAI,QAAQ,MAAM,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAErF,MAAI,CAAC,WAAA,EAAc,OAAM,eAAe,QAAQ;AAEzC,SAAA,qBAAqB,WAAW,UAAkC;AAC3E;AC7CO,SAAS,mBACd,UACuC;AACvC,WAAS,UAAU;AACjB,UAAM,WAAW,kBAAkB;AAC5B,WAAA,YAAY,IAAI,WAAoB,SAAS,UAAU,GAAG,MAAM,GAAG,CAAC,QAAQ,CAAC;AAAA,EAAA;AAG/E,SAAA;AACT;AC6Ba,MAAA,oBAAoB,mBAAmB,cAAc,GClCrD,YAAY,mBAAmB,MAAM;"}
+{"version":3,"file":"useLogOut.js","sources":["../../src/hooks/context/useSanityInstance.ts","../../src/hooks/helpers/createStateSourceHook.tsx","../../src/hooks/auth/useAuthState.tsx","../../src/hooks/helpers/createCallbackHook.tsx","../../src/hooks/auth/useHandleCallback.tsx","../../src/hooks/auth/useLoginUrls.tsx","../../src/hooks/auth/useLogOut.tsx"],"sourcesContent":["import {type SanityInstance} from '@sanity/sdk'\nimport {useContext} from 'react'\n\nimport {SanityInstanceContext} from '../../context/SanityProvider'\n\n/**\n * Hook that provides the current Sanity instance from the context.\n * This must be called from within a `SanityProvider` component.\n * @public\n * @returns the current Sanity instance\n * @example\n * ```tsx\n * const instance = useSanityInstance()\n * ```\n */\nexport const useSanityInstance = (): SanityInstance => {\n  const sanityInstance = useContext(SanityInstanceContext)\n  if (!sanityInstance) {\n    throw new Error('useSanityInstance must be called from within the SanityProvider')\n  }\n\n  return sanityInstance\n}\n","import {type SanityInstance, type StateSource} from '@sanity/sdk'\nimport {useMemo, useSyncExternalStore} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\nexport function createStateSourceHook<TParams extends unknown[], TState>(\n  stateSourceFactory: (instance: SanityInstance, ...params: TParams) => StateSource<TState>,\n): (...params: TParams) => TState {\n  function useHook(...params: TParams) {\n    const instance = useSanityInstance()\n    const {subscribe, getCurrent} = useMemo(\n      () => stateSourceFactory(instance, ...params),\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [instance, ...params],\n    )\n\n    return useSyncExternalStore(subscribe, getCurrent)\n  }\n\n  return useHook\n}\n","import {getAuthState} from '@sanity/sdk'\n\nimport {createStateSourceHook} from '../helpers/createStateSourceHook'\n\n/**\n * A React hook that subscribes to authentication state changes.\n *\n * This hook provides access to the current authentication state type from the Sanity auth store.\n * It automatically re-renders the component when the authentication state changes.\n *\n * @remarks\n * The hook uses `useSyncExternalStore` to safely subscribe to auth state changes\n * and ensure consistency between server and client rendering.\n *\n * @returns The current authentication state type\n *\n * @example\n * ```tsx\n * function AuthStatus() {\n *   const authState = useAuthState()\n *   return <div>Current auth state: {authState}</div>\n * }\n * ```\n *\n * @public\n */\nexport const useAuthState = createStateSourceHook(getAuthState)\n","import {type SanityInstance} from '@sanity/sdk'\nimport {useCallback} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\nexport function createCallbackHook<TParams extends unknown[], TReturn>(\n  callback: (instance: SanityInstance, ...params: TParams) => TReturn,\n): () => (...params: TParams) => TReturn {\n  function useHook() {\n    const instance = useSanityInstance()\n    return useCallback((...params: TParams) => callback(instance, ...params), [instance])\n  }\n\n  return useHook\n}\n","import {handleCallback} from '@sanity/sdk'\n\nimport {createCallbackHook} from '../helpers/createCallbackHook'\n\n/**\n * A React hook that returns a function for handling authentication callbacks.\n *\n * @remarks\n * This hook provides access to the authentication store's callback handler,\n * which processes auth redirects by extracting the session ID and fetching the\n * authentication token. If fetching the long-lived token is successful,\n * `handleCallback` will return a Promise that resolves a new location that\n * removes the short-lived token from the URL. Use this in combination with\n * `history.replaceState` or your own router's `replace` function to update the\n * current location without triggering a reload.\n *\n * @example\n * ```tsx\n * function AuthCallback() {\n *   const handleCallback = useHandleCallback()\n *   const router = useRouter() // Example router\n *\n *   useEffect(() => {\n *     async function processCallback() {\n *       // Handle the callback and get the cleaned URL\n *       const newUrl = await handleCallback(window.location.href)\n *\n *       if (newUrl) {\n *         // Replace URL without triggering navigation\n *         router.replace(newUrl, {shallow: true})\n *       }\n *     }\n *\n *     processCallback().catch(console.error)\n *   }, [handleCallback, router])\n *\n *   return <div>Completing login...</div>\n * }\n * ```\n *\n * @returns A callback handler function that processes OAuth redirects\n * @public\n */\nexport const useHandleCallback = createCallbackHook(handleCallback)\n","import {type AuthProvider, fetchLoginUrls, getLoginUrlsState} from '@sanity/sdk'\nimport {useMemo, useSyncExternalStore} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\n\n/**\n * A React hook that retrieves the available authentication provider URLs for login.\n *\n * @remarks\n * This hook fetches the login URLs from the Sanity auth store when the component mounts.\n * Each provider object contains information about an authentication method, including its URL.\n * The hook will suspend if the login URLs have not yet loaded.\n *\n * @example\n * ```tsx\n * // LoginProviders component that uses the hook\n * function LoginProviders() {\n *   const providers = useLoginUrls()\n *\n *   return (\n *     <div>\n *       {providers.map((provider) => (\n *         <a key={provider.name} href={provider.url}>\n *           Login with {provider.title}\n *         </a>\n *       ))}\n *     </div>\n *   )\n * }\n *\n * // Parent component with Suspense boundary\n * function LoginPage() {\n *   return (\n *     <Suspense fallback={<div>Loading authentication providers...</div>}>\n *       <LoginProviders />\n *     </Suspense>\n *   )\n * }\n * ```\n *\n * @returns An array of {@link AuthProvider} objects containing login URLs and provider information\n * @public\n */\nexport function useLoginUrls(): AuthProvider[] {\n  const instance = useSanityInstance()\n  const {subscribe, getCurrent} = useMemo(() => getLoginUrlsState(instance), [instance])\n\n  if (!getCurrent()) throw fetchLoginUrls(instance)\n\n  return useSyncExternalStore(subscribe, getCurrent as () => AuthProvider[])\n}\n","import {logout} from '@sanity/sdk'\n\nimport {createCallbackHook} from '../helpers/createCallbackHook'\n\n/**\n * Hook to log out of the current session\n * @public\n * @returns A function to log out of the current session\n */\nexport const useLogOut = createCallbackHook(logout)\n"],"names":[],"mappings":";;;AAeO,MAAM,oBAAoB,MAAsB;AAC/C,QAAA,iBAAiB,WAAW,qBAAqB;AACvD,MAAI,CAAC;AACG,UAAA,IAAI,MAAM,iEAAiE;AAG5E,SAAA;AACT;ACjBO,SAAS,sBACd,oBACgC;AAChC,WAAS,WAAW,QAAiB;AACnC,UAAM,WAAW,kBAAkB,GAC7B,EAAC,WAAW,WAAc,IAAA;AAAA,MAC9B,MAAM,mBAAmB,UAAU,GAAG,MAAM;AAAA;AAAA,MAE5C,CAAC,UAAU,GAAG,MAAM;AAAA,IACtB;AAEO,WAAA,qBAAqB,WAAW,UAAU;AAAA,EAAA;AAG5C,SAAA;AACT;ACMa,MAAA,eAAe,sBAAsB,YAAY;ACrBvD,SAAS,mBACd,UACuC;AACvC,WAAS,UAAU;AACjB,UAAM,WAAW,kBAAkB;AAC5B,WAAA,YAAY,IAAI,WAAoB,SAAS,UAAU,GAAG,MAAM,GAAG,CAAC,QAAQ,CAAC;AAAA,EAAA;AAG/E,SAAA;AACT;AC6Ba,MAAA,oBAAoB,mBAAmB,cAAc;ACA3D,SAAS,eAA+B;AAC7C,QAAM,WAAW,qBACX,EAAC,WAAW,WAAU,IAAI,QAAQ,MAAM,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAErF,MAAI,CAAC,WAAA,EAAc,OAAM,eAAe,QAAQ;AAEzC,SAAA,qBAAqB,WAAW,UAAkC;AAC3E;ACzCa,MAAA,YAAY,mBAAmB,MAAM;"}

package/dist/components.d.ts

@@ -1,10 +1,6 @@
 import {FallbackProps} from 'react-error-boundary'
-import {ForwardRefExoticComponent} from 'react'
 import {JSX} from 'react'
-import type {PropsWithChildren} from 'react'
-import {ReactElement} from 'react'
-import {RefAttributes} from 'react'
-import {SanityInstance} from '@sanity/sdk'
+import {SanityConfig} from '@sanity/sdk'
 
 /**
  * A component that handles authentication flow and error boundaries for a
@@ -35,7 +31,7 @@ export declare function AuthBoundary({
 /**
  * @alpha
  */
-export declare interface AuthBoundaryProps extends LoginLayoutProps {
+declare interface AuthBoundaryProps extends LoginLayoutProps {
   /**
    * Custom component to render the login screen.
    * Receives all login layout props. Defaults to {@link Login}.
@@ -54,144 +50,15 @@ export declare interface AuthBoundaryProps extends LoginLayoutProps {
   LoginErrorComponent?: React.ComponentType<LoginErrorProps>
 }
 
-/**
- * Error class for authentication-related errors. Wraps errors thrown during the
- * authentication flow.
- *
- * @remarks
- * This class provides a consistent error type for authentication failures while
- * preserving the original error as the cause. If the original error has a
- * message property, it will be used as the error message.
- *
- * @alpha
- */
-export declare class AuthError extends Error {
-  constructor(error: unknown)
-}
-
-/**
- * @public
- */
-export declare const DocumentGridLayout: {
-  (props: PropsWithChildren): ReactElement
-  displayName: string
-}
-
-/**
- * @public
- */
-export declare const DocumentListLayout: {
-  (props: PropsWithChildren): ReactElement
-  displayName: string
-}
-
-/**
- * This is a component that renders a document preview.
- *
- * @public
- *
- * @param props - The props for the DocumentPreviewLayout component.
- * @returns - The DocumentPreviewLayout component.
- */
-export declare const DocumentPreviewLayout: ForwardRefExoticComponent<
-  DocumentPreviewLayoutProps & RefAttributes<HTMLElement>
->
-
-/**
- * @public
- */
-export declare interface DocumentPreviewLayoutProps {
-  docType?: string
-  media?:
-    | {
-        type: string
-        url: string
-      }
-    | null
-    | undefined
-  onClick?: () => void
-  selected?: boolean
-  status?: string
-  subtitle?: string
-  title: string
-}
-
-/**
- * Login component that displays available authentication providers.
- * Renders a list of login options with a loading fallback while providers load.
- *
- * @alpha
- */
-export declare function Login({header, footer}: LoginLayoutProps): JSX.Element
-
-/**
- /**
- * Component shown during auth callback processing that handles login completion.
- * Automatically processes the auth callback when mounted and updates the URL
- * to remove callback parameters without triggering a page reload.
- *
- * @alpha
- */
-export declare function LoginCallback({header, footer}: LoginLayoutProps): React.ReactNode
-
-/**
- * Displays authentication error details and provides retry functionality.
- * Only handles {@link AuthError} instances - rethrows other error types.
- *
- * @alpha
- */
-export declare function LoginError({
-  error,
-  resetErrorBoundary,
-  header,
-  footer,
-}: LoginErrorProps): React.ReactNode
-
 /**
  * @alpha
  */
-export declare type LoginErrorProps = FallbackProps & LoginLayoutProps
-
-/**
- * Layout component for login-related screens providing consistent styling and structure.
- * Renders content in a centered card with optional header and footer sections.
- *
- * Can be used to build custom login screens for the AuthBoundary component, including:
- * - Login provider selection (LoginComponent)
- * - OAuth callback handling (CallbackComponent)
- * - Error states (LoginErrorComponent)
- *
- * @example
- * ```tsx
- * // Custom login screen using the layout
- * function CustomLogin({header, footer}: LoginLayoutProps) {
- *   return (
- *     <LoginLayout
- *       header={header}
- *       footer={footer}
- *     >
- *       <CustomLoginContent />
- *     </LoginLayout>
- *   )
- * }
- *
- * // Use with AuthBoundary
- * <AuthBoundary
- *   LoginComponent={CustomLogin}
- *   header={<Logo />}
- * >
- *   <ProtectedContent />
- * </AuthBoundary>
- * ```
- *
- * @alpha
- */
-export declare function LoginLayout({children, footer, header}: LoginLayoutProps): React.ReactNode
+declare type LoginErrorProps = FallbackProps & LoginLayoutProps
 
 /**
  * @alpha
  */
-export declare interface LoginLayoutProps {
+declare interface LoginLayoutProps {
   /** Optional header content rendered at top of card */
   header?: React.ReactNode
   /** Optional footer content rendered below card. Defaults to an internal login footer */
@@ -201,59 +68,16 @@ export declare interface LoginLayoutProps {
 }
 
 /**
- * Component that handles Sanity authentication flow and renders login provider options
- *
  * @public
  *
- * @returns Rendered component
- *
- * @remarks
- * The component handles three states:
- * 1. Loading state during token exchange
- * 2. Success state after successful authentication
- * 3. Provider selection UI when not authenticated
- *
- * @example
- * ```tsx
- * const config = { projectId: 'your-project-id', dataset: 'production' }
- * return <LoginLinks sanityInstance={config} />
- * ```
- */
-export declare const LoginLinks: () => ReactElement
-
-/**
- * Top-level context provider that provides a Sanity configuration instance.
- * This must wrap any Sanity SDK React component.
- * @public
- * @param props - Sanity project and dataset configuration
- * @returns Rendered component
- * @example
- * ```tsx
- * import {createSanityInstance} from '@sanity/sdk'
- * import {ExampleComponent, SanityProvider} from '@sanity/sdk-react'
- *
- * const sanityInstance = createSanityInstance({projectId: 'your-project-id', dataset: 'production'})
- *
- * export default function MyApp() {
- *   return (
- *     <SanityProvider sanityInstance={sanityInstance}>
- *      <ExampleComponent />
- *     </SanityProvider>
- *   )
- * }
- * ```
+ * @returns Rendered child component wrapped in a SanityProvider and AuthBoundary
  */
-export declare const SanityProvider: ({
+export declare function SanityApp({
+  sanityConfig,
   children,
-  sanityInstance,
-}: SanityProviderProps) => ReactElement
-
-/**
- * @public
- */
-export declare interface SanityProviderProps {
+}: {
   children: React.ReactNode
-  sanityInstance: SanityInstance
-}
+  sanityConfig: SanityConfig
+}): JSX.Element
 
 export {}

package/dist/components.js

@@ -1,12 +1,10 @@
-import { jsxs, jsx, Fragment as Fragment$1 } from "react/jsx-runtime";
-import { AuthStateType } from "@sanity/sdk";
-import { Fragment, Suspense, useEffect, useCallback, useMemo, forwardRef } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { AuthStateType, createSanityInstance } from "@sanity/sdk";
+import { Fragment, Suspense, useEffect, useCallback, useMemo } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { useLoginUrls, useHandleCallback, useLogOut, useAuthState } from "./_chunks-es/useLogOut.js";
-import { SanityProvider } from "./_chunks-es/useLogOut.js";
-import { Flex, Text, Card, Heading, Spinner, Button, Container, Stack } from "@sanity/ui";
 import { SanityLogo } from "@sanity/logos";
-import { DocumentIcon } from "@sanity/icons";
+import { SanityProvider } from "./_chunks-es/context.js";
 class AuthError extends Error {
   constructor(error) {
     typeof error == "object" && error && "message" in error && typeof error.message == "string" ? super(error.message) : super(), this.cause = error;
@@ -35,21 +33,9 @@ const LINKS = [
   }
 ];
 function LoginFooter() {
-  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, justify: "center", align: "center", paddingTop: 2, children: [
-    /* @__PURE__ */ jsx(Text, { size: 3, children: /* @__PURE__ */ jsx(SanityLogo, {}) }),
-    /* @__PURE__ */ jsx(Flex, { align: "center", gap: 2, children: LINKS.map((link, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: link.url,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          style: { color: "inherit" },
-          children: link.title
-        }
-      ) }),
-      index < LINKS.length - 1 && /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: "\u2022" })
-    ] }, link.title)) })
+  return /* @__PURE__ */ jsxs("div", { className: "sc-login-footer", children: [
+    /* @__PURE__ */ jsx(SanityLogo, { className: "sc-login-footer__logo" }),
+    /* @__PURE__ */ jsx("ul", { className: "sc-login-footer__links", children: LINKS.map((link) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("li", { className: "sc-login-footer__link", children: /* @__PURE__ */ jsx("a", { href: link.url, target: "_blank", rel: "noopener noreferrer", children: link.title }) }) }, link.title)) })
   ] });
 }
 function LoginLayout({
@@ -57,29 +43,23 @@ function LoginLayout({
   footer = /* @__PURE__ */ jsx(LoginFooter, {}),
   header
 }) {
-  return /* @__PURE__ */ jsx("div", { style: { width: "100%", display: "flex" }, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, style: { width: "320px", margin: "auto", display: "flex" }, children: [
-    /* @__PURE__ */ jsx(Card, { border: !0, radius: 2, paddingY: 4, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, children: [
-      header && /* @__PURE__ */ jsx(Card, { borderBottom: !0, paddingX: 4, paddingBottom: 3, children: header }),
-      children && /* @__PURE__ */ jsx(Flex, { paddingX: 4, direction: "column", style: { minHeight: "154px" }, children })
-    ] }) }),
+  return /* @__PURE__ */ jsx("div", { className: "sc-login-layout", children: /* @__PURE__ */ jsxs("div", { className: "sc-login-layout__container", children: [
+    /* @__PURE__ */ jsxs("div", { className: "sc-login-layout__card", children: [
+      header && /* @__PURE__ */ jsx("div", { className: "sc-login-layout__card-header", children: header }),
+      children && /* @__PURE__ */ jsx("div", { className: "sc-login-layout__card-body", children })
+    ] }),
     footer
   ] }) });
 }
 function Login({ header, footer }) {
-  return /* @__PURE__ */ jsx(LoginLayout, { header, footer, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, children: [
-    /* @__PURE__ */ jsx(Heading, { as: "h1", size: 1, align: "center", children: "Choose login provider" }),
-    /* @__PURE__ */ jsx(
-      Suspense,
-      {
-        fallback: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", style: { height: "123px" }, children: /* @__PURE__ */ jsx(Spinner, {}) }),
-        children: /* @__PURE__ */ jsx(Providers, {})
-      }
-    )
+  return /* @__PURE__ */ jsx(LoginLayout, { header, footer, children: /* @__PURE__ */ jsxs("div", { className: "sc-login", children: [
+    /* @__PURE__ */ jsx("h1", { className: "sc-login__title", children: "Choose login provider" }),
+    /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "sc-login__loading", children: "Loading\u2026" }), children: /* @__PURE__ */ jsx(Providers, {}) })
   ] }) });
 }
 function Providers() {
   const loginUrls = useLoginUrls();
-  return /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 3, children: loginUrls.map(({ title, url }) => /* @__PURE__ */ jsx(Button, { text: title, as: "a", href: url, mode: "ghost" }, url)) });
+  return /* @__PURE__ */ jsx("div", { className: "sc-login-providers", children: loginUrls.map(({ title, url }) => /* @__PURE__ */ jsx("a", { href: url, children: title }, url)) });
 }
 function LoginCallback({ header, footer }) {
   const handleCallback = useHandleCallback();
@@ -88,9 +68,9 @@ function LoginCallback({ header, footer }) {
     handleCallback(url.toString()).then((replacementLocation) => {
       replacementLocation && history.replaceState(null, "", replacementLocation);
     });
-  }, [handleCallback]), /* @__PURE__ */ jsx(LoginLayout, { header, footer, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", justify: "center", align: "center", gap: 4, style: { margin: "auto" }, children: [
-    /* @__PURE__ */ jsx(Text, { size: 1, children: "Logging you in\u2026" }),
-    /* @__PURE__ */ jsx(Spinner, { size: 4 })
+  }, [handleCallback]), /* @__PURE__ */ jsx(LoginLayout, { header, footer, children: /* @__PURE__ */ jsxs("div", { className: "sc-login-callback", children: [
+    /* @__PURE__ */ jsx("h1", { className: "sc-login-callback__title", children: "Logging you in\u2026" }),
+    /* @__PURE__ */ jsx("div", { className: "sc-login-callback__loading", children: "Loading\u2026" })
   ] }) });
 }
 function LoginError({
@@ -103,12 +83,12 @@ function LoginError({
   const logout = useLogOut(), handleRetry = useCallback(async () => {
     await logout(), resetErrorBoundary();
   }, [logout, resetErrorBoundary]);
-  return /* @__PURE__ */ jsx(LoginLayout, { header, footer, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, style: { margin: "auto" }, children: [
-    /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [
-      /* @__PURE__ */ jsx(Text, { as: "h2", align: "center", weight: "bold", size: 3, children: "Authentication Error" }),
-      /* @__PURE__ */ jsx(Text, { size: 1, align: "center", children: "Please try again or contact support if the problem persists." })
+  return /* @__PURE__ */ jsx(LoginLayout, { header, footer, children: /* @__PURE__ */ jsxs("div", { className: "sc-login-error", children: [
+    /* @__PURE__ */ jsxs("div", { className: "sc-login-error__content", children: [
+      /* @__PURE__ */ jsx("h2", { className: "sc-login-error__title", children: "Authentication Error" }),
+      /* @__PURE__ */ jsx("p", { className: "sc-login-error__description", children: "Please try again or contact support if the problem persists." })
     ] }),
-    /* @__PURE__ */ jsx(Button, { text: "Retry", tone: "primary", onClick: handleRetry })
+    /* @__PURE__ */ jsx("button", { className: "sc-login-error__button", onClick: handleRetry, children: "Retry" })
   ] }) });
 }
 function AuthBoundary({
@@ -138,164 +118,15 @@ function AuthSwitch({
       return /* @__PURE__ */ jsx(LoginComponent, { ...props });
   }
 }
-const DocumentGridLayout = (props) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-  /* @__PURE__ */ jsx("style", { children: `
-        .DocumentGridLayout {
-          grid-template-columns: repeat(auto-fit, minmax(38ch, 1fr));
-        }
-      ` }),
-  /* @__PURE__ */ jsx("ol", { className: "DocumentGridLayout list-none grid", children: props.children })
-] });
-DocumentGridLayout.displayName = "DocumentGridLayout";
-const DocumentListLayout = (props) => /* @__PURE__ */ jsx("ol", { className: "DocumentListLayout list-none", children: props.children });
-DocumentListLayout.displayName = "DocumentListLayout";
-const DocumentPreviewLayout = forwardRef(
-  ({
-    docType,
-    media,
-    onClick,
-    selected = !1,
-    status = "",
-    subtitle = "",
-    title
-  }, ref) => {
-    if (!title)
-      return /* @__PURE__ */ jsx(Fragment$1, {});
-    let PreviewMedia;
-    if (media?.url) {
-      const baseUrl = new URL(media.url);
-      baseUrl.searchParams.set("h", "66"), baseUrl.searchParams.set("w", "66"), baseUrl.searchParams.set("fit", "crop");
-      const mediaUrl = baseUrl.toString();
-      PreviewMedia = /* @__PURE__ */ jsx("img", { src: mediaUrl, alt: "" });
-    } else
-      PreviewMedia = /* @__PURE__ */ jsx(DocumentIcon, {});
-    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx("style", { children: `
-          .DocumentPreviewLayout {
-            --_hoverFocusBg: light-dark(var(--shade-11), var(--tint-1));
-            --_selectedBg: light-dark(var(--blue-10), var(--blue-2));
-            --_selectedFg: light-dark(var(--gray-1), var(--gray-10));
-            --_titleFg: light-dark(var(--gray-1), var(--gray-10));
-            --_subtitleFg: light-dark(var(--gray-4), var(--gray-7));
-            --_docTypeFg: light-dark(var(--gray-1), var(--gray-10));
-            --_docTypeBg: light-dark(var(--shade-10), var(--tint-1));
-            --_publishedFg: light-dark(var(--gray-1), var(--gray-10));
-            --_publishedBg: light-dark(var(--green-10), var(--green-2));
-            --_draftFg: light-dark(var(--gray-1), var(--gray-10));
-            --_draftBg: light-dark(var(--yellow-6), var(--yellow-2));
-
-            appearance: none;
-
-            &:has(:hover, focus) {
-              background-color: var(--hoverFocusBg, var(--_hoverFocusBg));
-            }
-
-            &.selected {
-              background-color: var(--selectedBg, var(--_selectedBg));
-              color: var(--selectedFg, var(--_selectedFg));
-            }
-
-            .Title {
-              color: var(--titleFg, var(--_titleFg));
-            }
-
-            &:not(.selected) .Subtitle {
-              color: var(--subtitleFg, var(--_subtitleFg));
-            }
-
-            .Media {
-              aspect-ratio: 1;
-              inline-size: 33px;
-              border-color: var(--gray-8);
-            }
-
-            .DocType {
-              color: var(--docTypeFg, var(--_docTypeFg));
-              background-color: var(--docTypeBg, var(--_docTypeBg));
-            }
-
-            .Published {
-              color: var(--publishedFg, var(--_publishedFg));
-              background-color: var(--publishedBg, var(--_publishedBg));
-            }
-
-            .Draft {
-              color: var(--draftFg, var(--_draftFg));
-              background-color: var(--draftBg, var(--_draftBg));
-            }
-
-            :is(.Published, .Draft) figcaption {
-              @container (width < 52ch) {
-                clip: rect(0 0 0 0);
-                clip-path: inset(50%);
-                height: 1px;
-                overflow: hidden;
-                position: absolute;
-                white-space: nowrap;
-                width: 1px;
-              }
-            }
-
-          }
-        ` }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick,
-          ref,
-          className: `DocumentPreviewLayout block si-100 text-start p-1 radius1 ${selected ? "selected" : ""}`,
-          children: /* @__PURE__ */ jsxs("div", { className: "container-inline flex align-items-center gap-2 font-sans", children: [
-            /* @__PURE__ */ jsx("figure", { className: "Media border0 border-solid flex-none flex align-items-center justify-content-center object-cover", children: PreviewMedia }),
-            /* @__PURE__ */ jsxs("div", { className: "leading2 flex-grow overflow-hidden", children: [
-              /* @__PURE__ */ jsx("p", { className: "Title text-1 font-medium truncate", children: title }),
-              subtitle && /* @__PURE__ */ jsx("p", { className: "Subtitle text-1 truncate", children: subtitle })
-            ] }),
-            docType && /* @__PURE__ */ jsx("figure", { className: "DocType inline-block pb-5 pi-3 radius-pill text-2", children: /* @__PURE__ */ jsx("figcaption", { className: "inline", children: docType }) }),
-            status === "published" && /* @__PURE__ */ jsxs("figure", { className: "Published inline-block pb-5 pi-3 radius-pill text-2", children: [
-              "\u2714\uFE0E ",
-              /* @__PURE__ */ jsx("figcaption", { className: "inline", children: "published" })
-            ] }),
-            status === "draft" && /* @__PURE__ */ jsxs("figure", { className: "Draft inline-block pb-5 pi-3 radius-pill text-2", children: [
-              "\u26D1\uFE0E ",
-              /* @__PURE__ */ jsx("figcaption", { className: "inline", children: "draft" })
-            ] })
-          ] })
-        }
-      )
-    ] });
-  }
-);
-DocumentPreviewLayout.displayName = "DocumentPreviewLayout";
-const LoginLinks = () => {
-  const loginUrls = useLoginUrls(), authState = useAuthState();
-  return useHandleCallback(), authState.type === "logging-in" ? /* @__PURE__ */ jsx("div", { children: "Logging in..." }) : authState.type === "logged-in" ? /* @__PURE__ */ jsx("div", { children: "You are logged in" }) : /* @__PURE__ */ jsx(Card, { height: "fill", overflow: "auto", paddingX: 4, children: /* @__PURE__ */ jsx(Flex, { height: "fill", direction: "column", align: "center", justify: "center", paddingTop: 4, children: /* @__PURE__ */ jsx(Container, { width: 0, children: /* @__PURE__ */ jsxs(Stack, { space: 4, children: [
-    /* @__PURE__ */ jsx(Heading, { align: "center", size: 1, children: "Choose login provider" }),
-    /* @__PURE__ */ jsx(Stack, { space: 2, children: loginUrls.map((provider, index) => /* @__PURE__ */ jsx(
-      Button,
-      {
-        as: "a",
-        href: provider.url,
-        mode: "ghost",
-        tone: "default",
-        space: 3,
-        padding: 3,
-        text: provider.title
-      },
-      `${provider.url}_${index}`
-    )) })
-  ] }) }) }) });
-};
+function SanityApp({
+  sanityConfig,
+  children
+}) {
+  const sanityInstance = createSanityInstance(sanityConfig);
+  return /* @__PURE__ */ jsx(SanityProvider, { sanityInstance, children: /* @__PURE__ */ jsx(AuthBoundary, { children }) });
+}
 export {
   AuthBoundary,
-  AuthError,
-  DocumentGridLayout,
-  DocumentListLayout,
-  DocumentPreviewLayout,
-  Login,
-  LoginCallback,
-  LoginError,
-  LoginLayout,
-  LoginLinks,
-  SanityProvider
+  SanityApp
 };
 //# sourceMappingURL=components.js.map