@sanity/sdk-react 0.0.0-alpha.1

package/dist/_chunks-es/useLogOut.js

@@ -0,0 +1,36 @@
+import { getAuthStore } from "@sanity/sdk";
+import { useStore } from "zustand/react";
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+const SanityInstanceContext = createContext(null), SanityProvider = ({ children, sanityInstance }) => /* @__PURE__ */ jsx(SanityInstanceContext.Provider, { value: sanityInstance, children }), useSanityInstance = () => {
+  const sanityInstance = useContext(SanityInstanceContext);
+  if (!sanityInstance)
+    throw new Error("useSanityInstance must be called from within the SanityProvider");
+  return sanityInstance;
+};
+function useAuthState() {
+  const instance = useSanityInstance(), { authState } = getAuthStore(instance);
+  return useStore(authState);
+}
+function useLoginUrls() {
+  const instance = useSanityInstance(), result = useMemo(() => getAuthStore(instance), [instance]).getLoginUrls();
+  if (Array.isArray(result)) return result;
+  throw result;
+}
+function useHandleCallback() {
+  const instance = useSanityInstance();
+  return useMemo(() => getAuthStore(instance), [instance]).handleCallback;
+}
+const useLogOut = () => {
+  const instance = useSanityInstance(), { logout } = getAuthStore(instance);
+  return logout;
+};
+export {
+  SanityProvider,
+  useAuthState,
+  useHandleCallback,
+  useLogOut,
+  useLoginUrls,
+  useSanityInstance
+};
+//# sourceMappingURL=useLogOut.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useLogOut.js","sources":["../../src/components/context/SanityProvider.tsx","../../src/hooks/context/useSanityInstance.ts","../../src/hooks/auth/useAuthState.tsx","../../src/hooks/auth/useLoginUrls.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 AuthState, getAuthStore} from '@sanity/sdk'\nimport {useStore} from 'zustand/react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\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 function useAuthState(): AuthState {\n  const instance = useSanityInstance()\n  const {authState} = getAuthStore(instance)\n\n  return useStore(authState)\n}\n","import {type AuthProvider, getAuthStore} from '@sanity/sdk'\nimport {useMemo} 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 authStore = useMemo(() => getAuthStore(instance), [instance])\n  const result = authStore.getLoginUrls()\n\n  if (Array.isArray(result)) return result\n  throw result\n}\n","import {type AuthStore, getAuthStore} from '@sanity/sdk'\nimport {useMemo} from 'react'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\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 function useHandleCallback(): AuthStore['handleCallback'] {\n  const instance = useSanityInstance()\n  const authStore = useMemo(() => getAuthStore(instance), [instance])\n\n  return authStore.handleCallback\n}\n","import {type AuthStore, getAuthStore} from '@sanity/sdk'\n\nimport {useSanityInstance} from '../context/useSanityInstance'\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 = (): AuthStore['logout'] => {\n  const instance = useSanityInstance()\n  const {logout} = getAuthStore(instance)\n\n  return logout\n}\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;ACKO,SAAS,eAA0B;AACxC,QAAM,WAAW,kBAAkB,GAC7B,EAAC,UAAS,IAAI,aAAa,QAAQ;AAEzC,SAAO,SAAS,SAAS;AAC3B;ACWO,SAAS,eAA+B;AAC7C,QAAM,WAAW,qBAEX,SADY,QAAQ,MAAM,aAAa,QAAQ,GAAG,CAAC,QAAQ,CAAC,EACzC,aAAa;AAEtC,MAAI,MAAM,QAAQ,MAAM,EAAU,QAAA;AAC5B,QAAA;AACR;ACNO,SAAS,oBAAiD;AAC/D,QAAM,WAAW,kBAAkB;AACjB,SAAA,QAAQ,MAAM,aAAa,QAAQ,GAAG,CAAC,QAAQ,CAAC,EAEjD;AACnB;ACxCO,MAAM,YAAY,MAA2B;AAClD,QAAM,WAAW,kBAAkB,GAC7B,EAAC,OAAM,IAAI,aAAa,QAAQ;AAE/B,SAAA;AACT;"}

package/dist/components.d.ts

@@ -0,0 +1,235 @@
+import {FallbackProps} from 'react-error-boundary'
+import type {PropsWithChildren} from 'react'
+import {ReactElement} from 'react'
+import {SanityInstance} from '@sanity/sdk'
+
+/**
+ * A component that handles authentication flow and error boundaries for a
+ * protected section of the application.
+ *
+ * @remarks
+ * This component manages different authentication states and renders the
+ * appropriate components based on that state.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <AuthBoundary header={<MyLogo />}>
+ *       <ProtectedContent />
+ *     </AuthBoundary>
+ *   )
+ * }
+ * ```
+ *
+ * @alpha
+ */
+export declare function AuthBoundary({
+  LoginErrorComponent,
+  ...props
+}: AuthBoundaryProps): React.ReactNode
+
+/**
+ * @alpha
+ */
+export declare interface AuthBoundaryProps extends LoginLayoutProps {
+  /**
+   * Custom component to render the login screen.
+   * Receives all login layout props. Defaults to {@link Login}.
+   */
+  LoginComponent?: React.ComponentType<LoginLayoutProps>
+  /**
+   * Custom component to render during OAuth callback processing.
+   * Receives all login layout props. Defaults to {@link LoginCallback}.
+   */
+  CallbackComponent?: React.ComponentType<LoginLayoutProps>
+  /**
+   * Custom component to render when authentication errors occur.
+   * Receives login layout props and error boundary props. Defaults to
+   * {@link LoginError}
+   */
+  LoginErrorComponent?: React.ComponentType<LoginErrorProps>
+}
+
+/**
+ * @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: {
+  ({docType, selected, status, subtitle, title, url}: DocumentPreviewLayoutProps): JSX.Element
+  displayName: string
+}
+
+/**
+ * @public
+ */
+export declare interface DocumentPreviewLayoutProps {
+  docType?: string
+  media?: React.ReactNode
+  selected?: boolean
+  status?: string
+  subtitle?: string
+  title: string
+  url?: 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
+
+/**
+ * @alpha
+ */
+export 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 */
+  footer?: React.ReactNode
+  /** Main content rendered in card body */
+  children?: React.ReactNode
+}
+
+/**
+ * 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>
+ *   )
+ * }
+ * ```
+ */
+export declare const SanityProvider: ({
+  children,
+  sanityInstance,
+}: SanityProviderProps) => ReactElement
+
+/**
+ * @public
+ */
+export declare interface SanityProviderProps {
+  children: React.ReactNode
+  sanityInstance: SanityInstance
+}
+
+export {}

package/dist/components.js

@@ -0,0 +1,250 @@
+import { jsxs, jsx, Fragment as Fragment$1 } from "react/jsx-runtime";
+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 { Text, Flex, Card, Heading, Spinner, Button, Stack, Badge, Container as Container$2 } from "@sanity/ui";
+import styled from "styled-components";
+import { SanityLogo } from "@sanity/logos";
+class AuthError extends Error {
+  constructor(error) {
+    typeof error == "object" && error && "message" in error && typeof error.message == "string" ? super(error.message) : super(), this.cause = error;
+  }
+}
+const LINKS = [
+  {
+    url: "https://slack.sanity.io/",
+    i18nKey: "workspaces.community-title",
+    title: "Community"
+  },
+  {
+    url: "https://www.sanity.io/docs",
+    i18nKey: "workspaces.docs-title",
+    title: "Docs"
+  },
+  {
+    url: "https://www.sanity.io/legal/privacy",
+    i18nKey: "workspaces.privacy-title",
+    title: "Privacy"
+  },
+  {
+    url: "https://www.sanity.io",
+    i18nKey: "workspaces.sanity-io-title",
+    title: "sanity.io"
+  }
+], StyledText = styled(Text)`
+  a {
+    color: inherit;
+  }
+`;
+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(StyledText, { muted: !0, size: 1, children: /* @__PURE__ */ jsx("a", { href: link.url, target: "_blank", rel: "noopener noreferrer", children: link.title }) }),
+      index < LINKS.length - 1 && /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: "\u2022" })
+    ] }, link.title)) })
+  ] });
+}
+const Root = styled.div`
+  width: 100%;
+  display: flex;
+`, Container$1 = styled(Flex)`
+  width: 320px;
+  margin: auto;
+  display: flex;
+`, StyledCard = styled(Card)``, ChildrenFlex = styled(Flex)`
+  min-height: 154px;
+`;
+function LoginLayout({
+  children,
+  footer = /* @__PURE__ */ jsx(LoginFooter, {}),
+  header
+}) {
+  return /* @__PURE__ */ jsx(Root, { children: /* @__PURE__ */ jsxs(Container$1, { direction: "column", gap: 4, children: [
+    /* @__PURE__ */ jsx(StyledCard, { 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(ChildrenFlex, { paddingX: 4, direction: "column", children })
+    ] }) }),
+    footer
+  ] }) });
+}
+const FallbackRoot = styled(Flex)`
+  height: 123px;
+`;
+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(FallbackRoot, { align: "center", justify: "center", children: /* @__PURE__ */ jsx(Spinner, {}) }),
+        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)) });
+}
+const StyledFlex$1 = styled(Flex)`
+  margin: auto;
+`;
+function LoginCallback({ header, footer }) {
+  const handleCallback = useHandleCallback();
+  return useEffect(() => {
+    const url = new URL(location.href);
+    handleCallback(url.toString()).then((replacementLocation) => {
+      replacementLocation && history.replaceState(null, "", replacementLocation);
+    });
+  }, [handleCallback]), /* @__PURE__ */ jsx(LoginLayout, { header, footer, children: /* @__PURE__ */ jsxs(StyledFlex$1, { direction: "column", justify: "center", align: "center", gap: 4, children: [
+    /* @__PURE__ */ jsx(Text, { size: 1, children: "Logging you in\u2026" }),
+    /* @__PURE__ */ jsx(Spinner, { size: 4 })
+  ] }) });
+}
+const StyledFlex = styled(Flex)`
+  margin: auto;
+`;
+function LoginError({
+  error,
+  resetErrorBoundary,
+  header,
+  footer
+}) {
+  if (!(error instanceof AuthError)) throw error;
+  const logout = useLogOut(), handleRetry = useCallback(async () => {
+    await logout(), resetErrorBoundary();
+  }, [logout, resetErrorBoundary]);
+  return /* @__PURE__ */ jsx(LoginLayout, { header, footer, children: /* @__PURE__ */ jsxs(StyledFlex, { direction: "column", gap: 4, 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." })
+    ] }),
+    /* @__PURE__ */ jsx(Button, { text: "Retry", tone: "primary", onClick: handleRetry })
+  ] }) });
+}
+function AuthBoundary({
+  LoginErrorComponent = LoginError,
+  ...props
+}) {
+  const { header, footer } = props, FallbackComponent = useMemo(() => function(fallbackProps) {
+    return /* @__PURE__ */ jsx(LoginErrorComponent, { ...fallbackProps, header, footer });
+  }, [header, footer, LoginErrorComponent]);
+  return /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent, children: /* @__PURE__ */ jsx(AuthSwitch, { ...props }) });
+}
+function AuthSwitch({
+  LoginComponent = Login,
+  CallbackComponent = LoginCallback,
+  children,
+  ...props
+}) {
+  const authState = useAuthState();
+  switch (authState.type) {
+    case "error":
+      throw new AuthError(authState.error);
+    case "logging-in":
+      return /* @__PURE__ */ jsx(CallbackComponent, { ...props });
+    case "logged-in":
+      return children;
+    default:
+      return /* @__PURE__ */ jsx(LoginComponent, { ...props });
+  }
+}
+const DocumentGrid = styled.div`
+  display: grid;
+  list-style: none;
+  margin: unset;
+  padding: unset;
+  grid-template-columns: repeat(auto-fit, minmax(38ch, 1fr));
+`, DocumentGridLayout = (props) => /* @__PURE__ */ jsx(DocumentGrid, { as: "ol", "data-ui": "DocumentGridLayout", children: props.children });
+DocumentGridLayout.displayName = "DocumentGridLayout";
+const DocumentListLayout = (props) => /* @__PURE__ */ jsx(Stack, { as: "ol", "data-ui": "DocumentListLayout", children: props.children });
+DocumentListLayout.displayName = "DocumentListLayout";
+const TempMedia = styled.div`
+  aspect-ratio: 1 / 1;
+  inline-size: 33px;
+  border: 1px solid #ccc;
+`, Container = styled.div`
+  container-type: inline-size;
+  display: flex;
+  align-items: center;
+  gap: 0.75em;
+`, StatusLabel = styled.span`
+  @container (width < 52ch) {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+`, DocumentPreviewLayout = ({
+  docType,
+  selected = !1,
+  status = "",
+  subtitle = "",
+  title,
+  url = ""
+}) => title ? /* @__PURE__ */ jsx(
+  Button,
+  {
+    as: "a",
+    href: url,
+    mode: "bleed",
+    width: "fill",
+    padding: 3,
+    selected,
+    "data-ui": "DocumentPreviewLayout",
+    children: /* @__PURE__ */ jsxs(Container, { children: [
+      /* @__PURE__ */ jsx(TempMedia, {}),
+      /* @__PURE__ */ jsxs(Stack, { flex: 1, space: 2, children: [
+        /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", textOverflow: "ellipsis", children: title }),
+        subtitle && /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, textOverflow: "ellipsis", children: subtitle })
+      ] }),
+      docType && /* @__PURE__ */ jsx(Badge, { padding: 2, fontSize: 0, children: docType }),
+      status === "published" && /* @__PURE__ */ jsxs(Badge, { padding: 2, fontSize: 0, tone: "positive", children: [
+        "\u2714\uFE0E ",
+        /* @__PURE__ */ jsx(StatusLabel, { children: "published" })
+      ] }),
+      status === "draft" && /* @__PURE__ */ jsxs(Badge, { padding: 2, fontSize: 0, tone: "caution", children: [
+        "\u26D1\uFE0E ",
+        /* @__PURE__ */ jsx(StatusLabel, { children: "draft" })
+      ] })
+    ] })
+  }
+) : /* @__PURE__ */ jsx(Fragment$1, {});
+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$2, { 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}`
+    )) })
+  ] }) }) }) });
+};
+export {
+  AuthBoundary,
+  DocumentGridLayout,
+  DocumentListLayout,
+  DocumentPreviewLayout,
+  Login,
+  LoginCallback,
+  LoginError,
+  LoginLayout,
+  LoginLinks,
+  SanityProvider
+};
+//# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sources":["../src/components/auth/AuthError.ts","../src/components/auth/LoginFooter.tsx","../src/components/auth/LoginLayout.tsx","../src/components/auth/Login.tsx","../src/components/auth/LoginCallback.tsx","../src/components/auth/LoginError.tsx","../src/components/auth/AuthBoundary.tsx","../src/components/DocumentGridLayout/DocumentGridLayout.tsx","../src/components/DocumentListLayout/DocumentListLayout.tsx","../src/components/DocumentPreviewLayout/DocumentPreviewLayout.tsx","../src/components/Login/LoginLinks.tsx"],"sourcesContent":["/**\n * Error class for authentication-related errors. Wraps errors thrown during the\n * authentication flow.\n *\n * @remarks\n * This class provides a consistent error type for authentication failures while\n * preserving the original error as the cause. If the original error has a\n * message property, it will be used as the error message.\n *\n * @alpha\n */\nexport class AuthError extends Error {\n  constructor(error: unknown) {\n    if (\n      typeof error === 'object' &&\n      !!error &&\n      'message' in error &&\n      typeof error.message === 'string'\n    ) {\n      super(error.message)\n    } else {\n      super()\n    }\n\n    this.cause = error\n  }\n}\n","import {SanityLogo} from '@sanity/logos'\nimport {Flex, Text} from '@sanity/ui'\nimport {Fragment} from 'react'\nimport styled from 'styled-components'\n\nconst LINKS = [\n  {\n    url: 'https://slack.sanity.io/',\n    i18nKey: 'workspaces.community-title',\n    title: 'Community',\n  },\n  {\n    url: 'https://www.sanity.io/docs',\n    i18nKey: 'workspaces.docs-title',\n    title: 'Docs',\n  },\n  {\n    url: 'https://www.sanity.io/legal/privacy',\n    i18nKey: 'workspaces.privacy-title',\n    title: 'Privacy',\n  },\n  {\n    url: 'https://www.sanity.io',\n    i18nKey: 'workspaces.sanity-io-title',\n    title: 'sanity.io',\n  },\n]\n\nconst StyledText = styled(Text)`\n  a {\n    color: inherit;\n  }\n`\n\n/**\n * Default footer component for login screens showing Sanity branding and legal\n * links.\n *\n * @alpha\n */\nexport function LoginFooter(): React.ReactNode {\n  return (\n    <Flex direction=\"column\" gap={4} justify=\"center\" align=\"center\" paddingTop={2}>\n      <Text size={3}>\n        <SanityLogo />\n      </Text>\n\n      <Flex align=\"center\" gap={2}>\n        {LINKS.map((link, index) => (\n          <Fragment key={link.title}>\n            <StyledText muted size={1}>\n              <a href={link.url} target=\"_blank\" rel=\"noopener noreferrer\">\n                {link.title}\n              </a>\n            </StyledText>\n\n            {index < LINKS.length - 1 && (\n              <Text size={1} muted>\n                •\n              </Text>\n            )}\n          </Fragment>\n        ))}\n      </Flex>\n    </Flex>\n  )\n}\n","import {Card, Flex} from '@sanity/ui'\nimport styled from 'styled-components'\n\nimport {LoginFooter} from './LoginFooter'\n\n/**\n * @alpha\n */\nexport interface LoginLayoutProps {\n  /** Optional header content rendered at top of card */\n  header?: React.ReactNode\n\n  /** Optional footer content rendered below card. Defaults to an internal login footer */\n  footer?: React.ReactNode\n\n  /** Main content rendered in card body */\n  children?: React.ReactNode\n}\n\nconst Root = styled.div`\n  width: 100%;\n  display: flex;\n`\n\nconst Container = styled(Flex)`\n  width: 320px;\n  margin: auto;\n  display: flex;\n`\n\nconst StyledCard = styled(Card)``\n\nconst ChildrenFlex = styled(Flex)`\n  min-height: 154px;\n`\n\n/**\n * Layout component for login-related screens providing consistent styling and structure.\n * Renders content in a centered card with optional header and footer sections.\n *\n * Can be used to build custom login screens for the AuthBoundary component, including:\n * - Login provider selection (LoginComponent)\n * - OAuth callback handling (CallbackComponent)\n * - Error states (LoginErrorComponent)\n *\n * @example\n * ```tsx\n * // Custom login screen using the layout\n * function CustomLogin({header, footer}: LoginLayoutProps) {\n *   return (\n *     <LoginLayout\n *       header={header}\n *       footer={footer}\n *     >\n *       <CustomLoginContent />\n *     </LoginLayout>\n *   )\n * }\n *\n * // Use with AuthBoundary\n * <AuthBoundary\n *   LoginComponent={CustomLogin}\n *   header={<Logo />}\n * >\n *   <ProtectedContent />\n * </AuthBoundary>\n * ```\n *\n * @alpha\n */\nexport function LoginLayout({\n  children,\n  footer = <LoginFooter />,\n  header,\n}: LoginLayoutProps): React.ReactNode {\n  return (\n    <Root>\n      <Container direction=\"column\" gap={4}>\n        <StyledCard border radius={2} paddingY={4}>\n          <Flex direction=\"column\" gap={4}>\n            {header && (\n              <Card borderBottom paddingX={4} paddingBottom={3}>\n                {header}\n              </Card>\n            )}\n\n            {children && (\n              <ChildrenFlex paddingX={4} direction=\"column\">\n                {children}\n              </ChildrenFlex>\n            )}\n          </Flex>\n        </StyledCard>\n\n        {footer}\n      </Container>\n    </Root>\n  )\n}\n","import {Button, Flex, Heading, Spinner} from '@sanity/ui'\nimport {Suspense} from 'react'\nimport styled from 'styled-components'\n\nimport {useLoginUrls} from '../../hooks/auth/useLoginUrls'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n * @alpha\n */\nexport interface LoginProps {\n  header?: React.ReactNode\n  footer?: React.ReactNode\n}\n\nconst FallbackRoot = styled(Flex)`\n  height: 123px;\n`\n\n/**\n * Login component that displays available authentication providers.\n * Renders a list of login options with a loading fallback while providers load.\n *\n * @alpha\n */\nexport function Login({header, footer}: LoginLayoutProps): JSX.Element {\n  return (\n    <LoginLayout header={header} footer={footer}>\n      <Flex direction=\"column\" gap={4}>\n        <Heading as=\"h1\" size={1} align=\"center\">\n          Choose login provider\n        </Heading>\n\n        <Suspense\n          fallback={\n            <FallbackRoot align=\"center\" justify=\"center\">\n              <Spinner />\n            </FallbackRoot>\n          }\n        >\n          <Providers />\n        </Suspense>\n      </Flex>\n    </LoginLayout>\n  )\n}\n\nfunction Providers() {\n  const loginUrls = useLoginUrls()\n\n  return (\n    <Flex direction=\"column\" gap={3}>\n      {loginUrls.map(({title, url}) => (\n        <Button key={url} text={title} as=\"a\" href={url} mode=\"ghost\" />\n      ))}\n    </Flex>\n  )\n}\n","import {Flex, Spinner, Text} from '@sanity/ui'\nimport {useEffect} from 'react'\nimport styled from 'styled-components'\n\nimport {useHandleCallback} from '../../hooks/auth/useHandleCallback'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\nconst StyledFlex = styled(Flex)`\n  margin: auto;\n`\n\n/**\n * Component shown during auth callback processing that handles login completion.\n * Automatically processes the auth callback when mounted and updates the URL\n * to remove callback parameters without triggering a page reload.\n *\n * @alpha\n */\nexport function LoginCallback({header, footer}: LoginLayoutProps): React.ReactNode {\n  const handleCallback = useHandleCallback()\n\n  useEffect(() => {\n    const url = new URL(location.href)\n    handleCallback(url.toString()).then((replacementLocation) => {\n      if (replacementLocation) {\n        // history API with `replaceState` is used to prevent a reload but still\n        // remove the short-lived token from the URL\n        history.replaceState(null, '', replacementLocation)\n      }\n    })\n  }, [handleCallback])\n\n  return (\n    <LoginLayout header={header} footer={footer}>\n      <StyledFlex direction=\"column\" justify=\"center\" align=\"center\" gap={4}>\n        <Text size={1}>Logging you in…</Text>\n        <Spinner size={4} />\n      </StyledFlex>\n    </LoginLayout>\n  )\n}\n","import {Button, Flex, Text} from '@sanity/ui'\nimport {useCallback} from 'react'\nimport {type FallbackProps} from 'react-error-boundary'\nimport styled from 'styled-components'\n\nimport {useLogOut} from '../../hooks/auth/useLogOut'\nimport {AuthError} from './AuthError'\nimport {LoginLayout, type LoginLayoutProps} from './LoginLayout'\n\n/**\n * @alpha\n */\nexport type LoginErrorProps = FallbackProps & LoginLayoutProps\n\nconst StyledFlex = styled(Flex)`\n  margin: auto;\n`\n\n/**\n * Displays authentication error details and provides retry functionality.\n * Only handles {@link AuthError} instances - rethrows other error types.\n *\n * @alpha\n */\nexport function LoginError({\n  error,\n  resetErrorBoundary,\n  header,\n  footer,\n}: LoginErrorProps): React.ReactNode {\n  if (!(error instanceof AuthError)) throw error\n  const logout = useLogOut()\n\n  const handleRetry = useCallback(async () => {\n    await logout()\n    resetErrorBoundary()\n  }, [logout, resetErrorBoundary])\n\n  return (\n    <LoginLayout header={header} footer={footer}>\n      <StyledFlex direction=\"column\" gap={4}>\n        <Flex direction=\"column\" gap={3}>\n          <Text as=\"h2\" align=\"center\" weight=\"bold\" size={3}>\n            Authentication Error\n          </Text>\n          <Text size={1} align=\"center\">\n            Please try again or contact support if the problem persists.\n          </Text>\n        </Flex>\n        <Button text=\"Retry\" tone=\"primary\" onClick={handleRetry} />\n      </StyledFlex>\n    </LoginLayout>\n  )\n}\n","import {useMemo} from 'react'\nimport {ErrorBoundary, type FallbackProps} from 'react-error-boundary'\n\nimport {useAuthState} from '../../hooks/auth/useAuthState'\nimport {AuthError} from './AuthError'\nimport {Login} from './Login'\nimport {LoginCallback} from './LoginCallback'\nimport {LoginError, type LoginErrorProps} from './LoginError'\nimport type {LoginLayoutProps} from './LoginLayout'\n\n/**\n * @alpha\n */\nexport interface AuthBoundaryProps extends LoginLayoutProps {\n  /**\n   * Custom component to render the login screen.\n   * Receives all login layout props. Defaults to {@link Login}.\n   */\n  LoginComponent?: React.ComponentType<LoginLayoutProps>\n\n  /**\n   * Custom component to render during OAuth callback processing.\n   * Receives all login layout props. Defaults to {@link LoginCallback}.\n   */\n  CallbackComponent?: React.ComponentType<LoginLayoutProps>\n\n  /**\n   * Custom component to render when authentication errors occur.\n   * Receives login layout props and error boundary props. Defaults to\n   * {@link LoginError}\n   */\n  LoginErrorComponent?: React.ComponentType<LoginErrorProps>\n}\n\n/**\n * A component that handles authentication flow and error boundaries for a\n * protected section of the application.\n *\n * @remarks\n * This component manages different authentication states and renders the\n * appropriate components based on that state.\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <AuthBoundary header={<MyLogo />}>\n *       <ProtectedContent />\n *     </AuthBoundary>\n *   )\n * }\n * ```\n *\n * @alpha\n */\nexport function AuthBoundary({\n  LoginErrorComponent = LoginError,\n  ...props\n}: AuthBoundaryProps): React.ReactNode {\n  const {header, footer} = props\n  const FallbackComponent = useMemo(() => {\n    return function LoginComponentWithLayoutProps(fallbackProps: FallbackProps) {\n      return <LoginErrorComponent {...fallbackProps} header={header} footer={footer} />\n    }\n  }, [header, footer, LoginErrorComponent])\n\n  return (\n    <ErrorBoundary FallbackComponent={FallbackComponent}>\n      <AuthSwitch {...props} />\n    </ErrorBoundary>\n  )\n}\n\ninterface AuthSwitchProps extends LoginLayoutProps {\n  LoginComponent?: React.ComponentType<LoginLayoutProps>\n  CallbackComponent?: React.ComponentType<LoginLayoutProps>\n}\n\nfunction AuthSwitch({\n  LoginComponent = Login,\n  CallbackComponent = LoginCallback,\n  children,\n  ...props\n}: AuthSwitchProps) {\n  const authState = useAuthState()\n\n  switch (authState.type) {\n    case 'error': {\n      throw new AuthError(authState.error)\n    }\n    case 'logging-in': {\n      return <CallbackComponent {...props} />\n    }\n    case 'logged-in': {\n      return children\n    }\n    default: {\n      return <LoginComponent {...props} />\n    }\n  }\n}\n","import type {PropsWithChildren, ReactElement} from 'react'\nimport styled from 'styled-components'\n\nconst DocumentGrid = styled.div`\n  display: grid;\n  list-style: none;\n  margin: unset;\n  padding: unset;\n  grid-template-columns: repeat(auto-fit, minmax(38ch, 1fr));\n`\n\n/**\n * @public\n */\nexport const DocumentGridLayout = (props: PropsWithChildren): ReactElement => {\n  return (\n    <DocumentGrid as=\"ol\" data-ui=\"DocumentGridLayout\">\n      {props.children}\n    </DocumentGrid>\n  )\n}\n\nDocumentGridLayout.displayName = 'DocumentGridLayout'\n","import {Stack} from '@sanity/ui'\nimport type {PropsWithChildren, ReactElement} from 'react'\n\n/**\n * @public\n */\nexport const DocumentListLayout = (props: PropsWithChildren): ReactElement => {\n  return (\n    <Stack as=\"ol\" data-ui=\"DocumentListLayout\">\n      {props.children}\n    </Stack>\n  )\n}\n\nDocumentListLayout.displayName = 'DocumentListLayout'\n","import {Badge, Button, Stack, Text} from '@sanity/ui'\nimport styled from 'styled-components'\n\n/**\n * @public\n */\nexport interface DocumentPreviewLayoutProps {\n  docType?: string\n  media?: React.ReactNode // Todo: determine how media data will be passed to this component; need to represent either an image or an icon\n  selected?: boolean\n  status?: string\n  subtitle?: string\n  title: string\n  url?: string\n}\n\n// Todo: replace with actual media (either image or icon)\nconst TempMedia = styled.div`\n  aspect-ratio: 1 / 1;\n  inline-size: 33px;\n  border: 1px solid #ccc;\n`\n\n// Set a containment context for the Preview\nconst Container = styled.div`\n  container-type: inline-size;\n  display: flex;\n  align-items: center;\n  gap: 0.75em;\n`\n\n// Status labels are visually hidden when a narrow document list is rendered;\n// text remains accessible to screen readers\nconst StatusLabel = styled.span`\n  @container (width < 52ch) {\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    height: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n`\n\n/**\n * This is a component that renders a document preview.\n *\n * @public\n *\n * @param props - The props for the DocumentPreviewLayout component.\n * @returns - The DocumentPreviewLayout component.\n */\nexport const DocumentPreviewLayout = ({\n  docType,\n  selected = false,\n  status = '',\n  subtitle = '',\n  title,\n  url = '',\n}: DocumentPreviewLayoutProps): JSX.Element => {\n  // Todo: empty state\n  if (!title) {\n    return <></>\n  }\n\n  return (\n    <Button\n      as=\"a\"\n      href={url}\n      mode=\"bleed\"\n      width=\"fill\"\n      padding={3}\n      selected={selected}\n      data-ui=\"DocumentPreviewLayout\"\n    >\n      <Container>\n        <TempMedia />\n\n        <Stack flex={1} space={2}>\n          <Text size={1} weight=\"medium\" textOverflow=\"ellipsis\">\n            {title}\n          </Text>\n          {subtitle && (\n            <Text muted size={1} textOverflow=\"ellipsis\">\n              {subtitle}\n            </Text>\n          )}\n        </Stack>\n\n        {docType && (\n          <Badge padding={2} fontSize={0}>\n            {docType}\n          </Badge>\n        )}\n\n        {/* Todo: finalize UI for this */}\n        {status === 'published' && (\n          <Badge padding={2} fontSize={0} tone=\"positive\">\n            ✔︎ <StatusLabel>published</StatusLabel>\n          </Badge>\n        )}\n\n        {/* Todo: finalize UI for this, determine if we need to show 'draft' or just 'published' */}\n        {status === 'draft' && (\n          <Badge padding={2} fontSize={0} tone=\"caution\">\n            ⛑︎ <StatusLabel>draft</StatusLabel>\n          </Badge>\n        )}\n      </Container>\n    </Button>\n  )\n}\n\nDocumentPreviewLayout.displayName = 'DocumentPreviewLayout'\n","import {Button, Card, Container, Flex, Heading, Stack} from '@sanity/ui'\nimport {type ReactElement} from 'react'\n\nimport {useAuthState} from '../../hooks/auth/useAuthState'\nimport {useHandleCallback} from '../../hooks/auth/useHandleCallback'\nimport {useLoginUrls} from '../../hooks/auth/useLoginUrls'\n\n/**\n * Component that handles Sanity authentication flow and renders login provider options\n *\n * @public\n *\n * @returns Rendered component\n *\n * @remarks\n * The component handles three states:\n * 1. Loading state during token exchange\n * 2. Success state after successful authentication\n * 3. Provider selection UI when not authenticated\n *\n * @example\n * ```tsx\n * const config = { projectId: 'your-project-id', dataset: 'production' }\n * return <LoginLinks sanityInstance={config} />\n * ```\n */\nexport const LoginLinks = (): ReactElement => {\n  const loginUrls = useLoginUrls()\n  const authState = useAuthState()\n  useHandleCallback()\n\n  if (authState.type === 'logging-in') {\n    return <div>Logging in...</div>\n  }\n\n  // Show success state after authentication\n  if (authState.type === 'logged-in') {\n    return <div>You are logged in</div>\n  }\n\n  /**\n   * Render provider selection UI\n   * Uses Sanity UI components for consistent styling\n   */\n  return (\n    <Card height=\"fill\" overflow=\"auto\" paddingX={4}>\n      <Flex height=\"fill\" direction=\"column\" align=\"center\" justify=\"center\" paddingTop={4}>\n        <Container width={0}>\n          <Stack space={4}>\n            <Heading align=\"center\" size={1}>\n              Choose login provider\n            </Heading>\n\n            <Stack space={2}>\n              {loginUrls.map((provider, index) => (\n                <Button\n                  key={`${provider.url}_${index}`}\n                  as=\"a\"\n                  href={provider.url}\n                  mode=\"ghost\"\n                  tone=\"default\"\n                  space={3}\n                  padding={3}\n                  text={provider.title}\n                />\n              ))}\n            </Stack>\n          </Stack>\n        </Container>\n      </Flex>\n    </Card>\n  )\n}\n"],"names":["Container","StyledFlex","Fragment"],"mappings":"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"}