Merge pull request #5368 from payloadcms/newtests

chore: get e2e and dev to work with test as new root directory

package.json

@@ -41,7 +41,7 @@
     "clean:cache": "rimraf node_modules/.cache && rimraf packages/payload/node_modules/.cache && rimraf .next",
     "clean:build": "find . \\( -type d \\( -name dist -o -name .cache -o -name .next -o -name .turbo \\) -o -type f -name tsconfig.tsbuildinfo \\) -not -path '*/node_modules/*' -exec rm -rf {} +",
     "clean:all": "find . \\( -type d \\( -name node_modules -o -name dist -o -name .cache -o -name .next -o -name .turbo \\) -o -type f -name tsconfig.tsbuildinfo \\) -exec rm -rf {} +",
-    "dev": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/dev.ts",
+    "dev": "cross-env NODE_OPTIONS=--no-deprecation node ./test/dev.js",
     "devsafe": "rimraf .next && pnpm dev",
     "dev:generate-graphql-schema": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/generateGraphQLSchema.ts",
     "dev:generate-types": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/generateTypes.ts",

packages/live-preview/src/handleMessage.d.ts

@@ -0,0 +1,8 @@
+export declare const handleMessage: <T>(args: {
+  apiRoute?: string
+  depth?: number
+  event: MessageEvent
+  initialData: T
+  serverURL: string
+}) => Promise<T>
+//# sourceMappingURL=handleMessage.d.ts.map

packages/live-preview/src/handleMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handleMessage.d.ts","sourceRoot":"","sources":["handleMessage.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,aAAa;eACb,MAAM;YACT,MAAM;WACP,YAAY;;eAER,MAAM;gBAyClB,CAAA"}

packages/live-preview/src/index.d.ts

@@ -0,0 +1,6 @@
+export { handleMessage } from './handleMessage.js'
+export { mergeData } from './mergeData.js'
+export { ready } from './ready.js'
+export { subscribe } from './subscribe.js'
+export { unsubscribe } from './unsubscribe.js'
+//# sourceMappingURL=index.d.ts.map

packages/live-preview/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA"}

packages/live-preview/src/mergeData.d.ts

@@ -0,0 +1,26 @@
+import type { fieldSchemaToJSON } from 'payload/utilities'
+import type { UpdatedDocument } from './types.js'
+export declare const mergeData: <T>(args: {
+  apiRoute?: string
+  collectionPopulationRequestHandler?: ({
+    apiPath,
+    endpoint,
+    serverURL,
+  }: {
+    apiPath: string
+    endpoint: string
+    serverURL: string
+  }) => Promise<Response>
+  depth?: number
+  externallyUpdatedRelationship?: UpdatedDocument
+  fieldSchema: ReturnType<typeof fieldSchemaToJSON>
+  incomingData: Partial<T>
+  initialData: T
+  returnNumberOfRequests?: boolean
+  serverURL: string
+}) => Promise<
+  T & {
+    _numberOfRequests?: number
+  }
+>
+//# sourceMappingURL=mergeData.d.ts.map

packages/live-preview/src/mergeData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mergeData.d.ts","sourceRoot":"","sources":["mergeData.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAE1D,OAAO,KAAK,EAA2B,eAAe,EAAE,MAAM,YAAY,CAAA;AAc1E,eAAO,MAAM,SAAS;eACT,MAAM;;iBAMN,MAAM;kBACL,MAAM;mBACL,MAAM;UACb,QAAQ,QAAQ,CAAC;YACf,MAAM;oCACkB,eAAe;iBAClC,WAAW,wBAAwB,CAAC;;;6BAGxB,OAAO;eACrB,MAAM;;wBAGK,MAAM;EA6D7B,CAAA"}

packages/live-preview/src/subscribe.d.ts

@@ -0,0 +1,8 @@
+export declare const subscribe: <T>(args: {
+  apiRoute?: string
+  callback: (data: T) => void
+  depth?: number
+  initialData: T
+  serverURL: string
+}) => (event: MessageEvent) => void
+//# sourceMappingURL=subscribe.d.ts.map

packages/live-preview/src/subscribe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"subscribe.d.ts","sourceRoot":"","sources":["subscribe.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;eACT,MAAM;2BACM,IAAI;YACnB,MAAM;;eAEH,MAAM;cACN,YAAY,KAAK,IAa7B,CAAA"}

packages/live-preview/src/traverseFields.d.ts

@@ -0,0 +1,10 @@
+import type { fieldSchemaToJSON } from 'payload/utilities'
+import type { PopulationsByCollection, UpdatedDocument } from './types.js'
+export declare const traverseFields: <T>(args: {
+  externallyUpdatedRelationship?: UpdatedDocument
+  fieldSchema: ReturnType<typeof fieldSchemaToJSON>
+  incomingData: T
+  populationsByCollection: PopulationsByCollection
+  result: T
+}) => void
+//# sourceMappingURL=traverseFields.d.ts.map

packages/live-preview/src/traverseFields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"traverseFields.d.ts","sourceRoot":"","sources":["traverseFields.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAE1D,OAAO,KAAK,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAI1E,eAAO,MAAM,cAAc;oCACO,eAAe;iBAClC,WAAW,wBAAwB,CAAC;;6BAExB,uBAAuB;;MAE9C,IA4QH,CAAA"}

packages/next/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@payloadcms/next",
   "version": "3.0.0-alpha.48",
-  "main": "./src/index.ts",
-  "types": "./src/index.d.ts",
+  "main": "./src/index.js",
+  "types": "./src/index.js",
   "type": "module",
   "bin": {
     "@payloadcms/next": "./dist/bin/index.js"
@@ -20,29 +20,15 @@
     "prepublishOnly": "pnpm clean && pnpm turbo build"
   },
   "exports": {
+    ".": {
+      "import": "./src/index.js",
+      "require": "./src/index.js",
+      "types": "./src/index.js"
+    },
     "./*": {
-      "import": "./dist/exports/*.js",
-      "require": "./dist/exports/*.js",
-      "types": "./dist/exports/*.ts"
-    },
-    "./utilities/*": {
-      "import": "./dist/utilities/*.js",
-      "require": "./dist/utilities/*.js",
-      "types": "./src/utilities/*.ts"
-    },
-    "./layouts/*": {
-      "import": "./dist/layouts/*.js",
-      "require": "./dist/layouts/*.js",
-      "types": "./src/layouts/*.ts"
-    },
-    "./views/*": {
-      "import": "./dist/views/*.js",
-      "require": "./dist/views/*.js",
-      "types": "./src/views/*.ts"
-    },
-    "./routes": {
-      "import": "./dist/routes/index.js",
-      "require": "./dist/routes/index.js"
+      "import": "./src/exports/*.ts",
+      "require": "./src/exports/*.ts",
+      "types": "./src/exports/*.ts"
     }
   },
   "devDependencies": {
@@ -88,48 +74,22 @@
     "payload": "workspace:*"
   },
   "publishConfig": {
-    "main": "./dist/exports/index.js",
-    "types": "./dist/exports/index.d.ts",
+    "main": "./dist/index.js",
+    "types": "./dist/index.js",
     "exports": {
       "./css": {
         "import": "./dist/prod/styles.css",
         "require": "./dist/prod/styles.css",
         "default": "./dist/prod/styles.css"
       },
-      "./withPayload": {
-        "import": "./dist/withPayload.js",
-        "require": "./dist/withPayload.js",
-        "types": "./dist/withPayload.d.ts"
-      },
       ".": {
         "import": "./dist/index.js",
-        "require": "./dist/index.js",
-        "types": "./dist/index.d.ts"
+        "require": "./dist/index.js"
       },
-      "./utilities/*": {
-        "import": "./dist/utilities/*.js",
-        "require": "./dist/utilities/*.js",
-        "types": "./dist/utilities/*.d.ts"
-      },
-      "./layouts/*": {
-        "import": "./dist/layouts/*.js",
-        "require": "./dist/layouts/*.js",
-        "types": "./dist/layouts/*.d.ts"
-      },
-      "./views/*": {
-        "import": "./dist/views/*.js",
-        "require": "./dist/views/*.js",
-        "types": "./dist/views/*.d.ts"
-      },
-      "./app/*": {
-        "import": "./dist/app/*.js",
-        "require": "./dist/app/*.js",
-        "types": "./dist/app/*.d.ts"
-      },
-      "./routes": {
-        "import": "./dist/routes/index.js",
-        "require": "./dist/routes/index.js",
-        "types": "./dist/routes/index.d.ts"
+      "./*": {
+        "import": "./dist/exports/*.js",
+        "require": "./dist/exports/*.js",
+        "types": "./dist/exports/*.d.ts"
       }
     },
     "registry": "https://registry.npmjs.org/"

packages/next/src/bin/index.ts

@@ -1,26 +0,0 @@
-import minimist from 'minimist'
-
-const args = minimist(process.argv.slice(2))
-const scriptIndex = args._.findIndex((x) => x === 'install')
-const script = scriptIndex === -1 ? args._[0] : args._[scriptIndex]
-
-const { debug } = args
-
-import { install } from './install.js'
-
-main()
-
-async function main() {
-  if (debug) console.log({ debug, pwd: process.cwd() })
-  switch (script.toLowerCase()) {
-    case 'install': {
-      if (debug) console.log('Running install')
-      await install({ debug })
-      break
-    }
-
-    default:
-      console.log(`Unknown script "${script}".`)
-      break
-  }
-}

packages/next/src/bin/install.ts

@@ -1,68 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-
-export const install = (args?: { debug?: boolean }): Promise<void> => {
-  const debug = args?.debug
-
-  const nextConfigPath = path.resolve(process.cwd(), 'next.config.js')
-  if (!fs.existsSync(nextConfigPath)) {
-    console.log(`No next.config.js found at ${nextConfigPath}`)
-    process.exit(1)
-  }
-
-  const apiTemplateDir = path.resolve(__dirname, '../..', 'dist', 'template/app/(payload)')
-  const userProjectDir = process.cwd()
-
-  if (!fs.existsSync(apiTemplateDir)) {
-    console.log(`Could not find template source files from ${apiTemplateDir}`)
-    process.exit(1)
-  }
-
-  if (!fs.existsSync(path.resolve(userProjectDir, 'app'))) {
-    console.log(`Could not find user app directory at ${userProjectDir}/app`)
-    process.exit(1)
-  }
-
-  const templateFileDest = path.resolve(userProjectDir, 'app/(payload)')
-
-  if (debug) {
-    console.log({
-      cwd: process.cwd(),
-
-      // Paths
-      apiTemplateDir,
-      templateFileDest,
-      userProjectDir,
-    })
-  }
-
-  // Merge api dir into user's app/api, user's files take precedence
-  copyRecursiveSync(apiTemplateDir, templateFileDest, debug)
-  process.exit(0)
-}
-
-/**
- * Recursively copy files from src to dest
- */
-function copyRecursiveSync(src: string, dest: string, debug?: boolean) {
-  const exists = fs.existsSync(src)
-  const stats = exists && fs.statSync(src)
-  const isDirectory = exists && stats.isDirectory()
-  if (isDirectory) {
-    if (debug) console.log(`Dir: ${src}\n--Dest: ${dest}`)
-    fs.mkdirSync(dest, { recursive: true })
-    fs.readdirSync(src).forEach((childItemName) => {
-      copyRecursiveSync(path.join(src, childItemName), path.join(dest, childItemName))
-    })
-  } else {
-    if (debug) console.log(`File: ${src}\n--Dest: ${dest}`)
-    fs.copyFileSync(src, dest)
-  }
-}
-
-if (require.main === module) {
-  install({ debug: true }).catch((e) => {
-    console.error(e)
-    process.exit(1)
-  })
-}

packages/next/src/elements/LeaveWithoutSaving/index.tsx

@@ -1,9 +1,9 @@
 'use client'
-import { Modal, useModal } from '@payloadcms/ui'
-import { Button } from '@payloadcms/ui/elements'
-import { useFormModified } from '@payloadcms/ui/forms'
-import { useAuth } from '@payloadcms/ui/providers'
-import { useTranslation } from '@payloadcms/ui/providers'
+import { Button } from '@payloadcms/ui/elements/Button'
+import { Modal, useModal } from '@payloadcms/ui/elements/Modal'
+import { useFormModified } from '@payloadcms/ui/forms/Form'
+import { useAuth } from '@payloadcms/ui/providers/Auth'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import React, { useCallback, useEffect } from 'react'
 
 import './index.scss'

packages/next/src/exports/index.ts

@@ -1 +0,0 @@
-export { default as withPayload } from '../withPayload.js'

packages/next/src/exports/layouts.ts

@@ -0,0 +1 @@
+export { RootLayout, metadata } from '../layouts/Root/index.js'

packages/next/src/exports/routes.ts

@@ -0,0 +1,8 @@
+export { GRAPHQL_PLAYGROUND_GET, GRAPHQL_POST } from '../routes/graphql/index.js'
+
+export {
+  DELETE as REST_DELETE,
+  GET as REST_GET,
+  PATCH as REST_PATCH,
+  POST as REST_POST,
+} from '../routes/rest/index.js'

packages/next/src/exports/utilities.ts

@@ -0,0 +1 @@
+export { getPayloadHMR } from '../utilities/getPayloadHMR.js'

packages/next/src/exports/views.ts

@@ -0,0 +1,2 @@
+export { NotFoundView } from '../views/NotFound/index.js'
+export { type GenerateViewMetadata, RootPage, generatePageMetadata } from '../views/Root/index.js'

packages/next/src/index.js

@@ -0,0 +1 @@
+export { default as withPayload } from './withPayload.js'

packages/next/src/index.ts

@@ -1,4 +0,0 @@
-export { RootLayout } from './layouts/Root/index.js'
-export { Dashboard as DashboardPage } from './views/Dashboard/index.js'
-export { Login } from './views/Login/index.js'
-export { RootPage } from './views/Root/index.js'

packages/next/src/layouts/Root/index.tsx

@@ -1,8 +1,9 @@
 import type { SanitizedConfig } from 'payload/types'
 
 import { translations } from '@payloadcms/translations/client'
-import { RootProvider, buildComponentMap } from '@payloadcms/ui'
+import { RootProvider } from '@payloadcms/ui/providers/Root'
 import '@payloadcms/ui/scss/app.scss'
+import { buildComponentMap } from '@payloadcms/ui/utilities/buildComponentMap'
 import { headers as getHeaders, cookies as nextCookies } from 'next/headers.js'
 import { parseCookies } from 'payload/auth'
 import { createClientConfig } from 'payload/config'

packages/next/src/routes/rest/buildFormState.ts

@@ -1,9 +1,14 @@
-import type { BuildFormStateArgs, FieldSchemaMap } from '@payloadcms/ui'
+import type { BuildFormStateArgs } from '@payloadcms/ui/forms/buildStateFromSchema'
 import type { Field, PayloadRequest, SanitizedConfig } from 'payload/types'
 
-import { buildFieldSchemaMap, buildStateFromSchema, reduceFieldsToValues } from '@payloadcms/ui'
+import { buildStateFromSchema } from '@payloadcms/ui/forms/buildStateFromSchema'
+import { reduceFieldsToValues } from '@payloadcms/ui/utilities/reduceFieldsToValues'
 import httpStatus from 'http-status'
 
+import type { FieldSchemaMap } from '../../utilities/buildFieldSchemaMap/types.js'
+
+import { buildFieldSchemaMap } from '../../utilities/buildFieldSchemaMap/index.js'
+
 let cached = global._payload_fieldSchemaMap
 
 if (!cached) {

packages/next/src/routes/rest/collections/duplicate.ts

@@ -19,7 +19,9 @@ export const duplicate: CollectionRouteHandlerWithID = async ({ id, collection,
     req,
   })
 
-  const message = req.t('general:successfullyDuplicated', {label: getTranslation(collection.config.labels.singular, req.i18n)})
+  const message = req.t('general:successfullyDuplicated', {
+    label: getTranslation(collection.config.labels.singular, req.i18n),
+  })
 
   return Response.json(
     {

packages/next/src/routes/rest/index.ts

@@ -30,6 +30,7 @@ import { create } from './collections/create.js'
 import { deleteDoc } from './collections/delete.js'
 import { deleteByID } from './collections/deleteByID.js'
 import { docAccess } from './collections/docAccess.js'
+import { duplicate } from './collections/duplicate.js'
 import { find } from './collections/find.js'
 import { findByID } from './collections/findByID.js'
 import { findVersionByID } from './collections/findVersionByID.js'
@@ -44,7 +45,6 @@ import { findVersionByID as findVersionByIdGlobal } from './globals/findVersionB
 import { findVersions as findVersionsGlobal } from './globals/findVersions.js'
 import { restoreVersion as restoreVersionGlobal } from './globals/restoreVersion.js'
 import { update as updateGlobal } from './globals/update.js'
-import { duplicate } from './collections/duplicate.js'
 
 const endpoints = {
   collection: {

packages/next/src/utilities/initPage.ts

@@ -8,7 +8,7 @@ import type {
 
 import { initI18n } from '@payloadcms/translations'
 import { translations } from '@payloadcms/translations/client'
-import { findLocaleFromCode } from '@payloadcms/ui'
+import { findLocaleFromCode } from '@payloadcms/ui/utilities/findLocaleFromCode'
 import { headers as getHeaders } from 'next/headers.js'
 import { notFound, redirect } from 'next/navigation.js'
 import { createLocalReq } from 'payload/utilities'

packages/next/src/views/API/RenderJSON/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { Chevron } from '@payloadcms/ui'
+import { Chevron } from '@payloadcms/ui/icons/Chevron'
 import * as React from 'react'
 
 import './index.scss'

packages/next/src/views/API/index.client.tsx

@@ -1,20 +1,18 @@
 'use client'
 
-import {
-  Checkbox,
-  CopyToClipboard,
-  Form,
-  Gutter,
-  MinimizeMaximize,
-  Number as NumberInput,
-  Select,
-  SetViewActions,
-  useComponentMap,
-  useConfig,
-  useDocumentInfo,
-  useLocale,
-  useTranslation,
-} from '@payloadcms/ui'
+import { CopyToClipboard } from '@payloadcms/ui/elements/CopyToClipboard'
+import { Gutter } from '@payloadcms/ui/elements/Gutter'
+import { Checkbox } from '@payloadcms/ui/fields/Checkbox'
+import { NumberField as NumberInput } from '@payloadcms/ui/fields/Number'
+import { Select } from '@payloadcms/ui/fields/Select'
+import { Form } from '@payloadcms/ui/forms/Form'
+import { MinimizeMaximize } from '@payloadcms/ui/icons/MinimizeMaximize'
+import { SetViewActions } from '@payloadcms/ui/providers/Actions'
+import { useComponentMap } from '@payloadcms/ui/providers/ComponentMap'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'
+import { useLocale } from '@payloadcms/ui/providers/Locale'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import { useSearchParams } from 'next/navigation.js'
 import qs from 'qs'
 import * as React from 'react'

packages/next/src/views/Account/Settings/index.tsx

@@ -1,6 +1,7 @@
 'use client'
-import { Label, ReactSelect } from '@payloadcms/ui'
-import { useTranslation } from '@payloadcms/ui/providers'
+import { ReactSelect } from '@payloadcms/ui/elements/ReactSelect'
+import { Label } from '@payloadcms/ui/forms/Label'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import React from 'react'
 
 import { ToggleTheme } from '../ToggleTheme/index.js'

packages/next/src/views/Account/ToggleTheme/index.tsx

@@ -1,14 +1,15 @@
 'use client'
-import type { OnChange, Theme } from '@payloadcms/ui'
 
-import { RadioGroupInput, useTheme, useTranslation } from '@payloadcms/ui'
+import { RadioGroup } from '@payloadcms/ui/fields/RadioGroup'
+import { useTheme } from '@payloadcms/ui/providers/Theme'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import React, { useCallback } from 'react'
 
 export const ToggleTheme: React.FC = () => {
   const { autoMode, setTheme, theme } = useTheme()
   const { t } = useTranslation()
 
-  const onChange = useCallback<OnChange<Theme>>(
+  const onChange = useCallback(
     (newTheme) => {
       setTheme(newTheme)
     },
@@ -16,7 +17,7 @@ export const ToggleTheme: React.FC = () => {
   )
 
   return (
-    <RadioGroupInput
+    <RadioGroup
       label={t('general:adminTheme')}
       name="theme"
       onChange={onChange}

packages/next/src/views/Account/index.tsx

@@ -1,16 +1,14 @@
 import type { DocumentPreferences, ServerSideEditViewProps, TypeWithID } from 'payload/types'
 import type { AdminViewProps } from 'payload/types'
 
-import {
-  DocumentHeader,
-  DocumentInfoProvider,
-  FormQueryParamsProvider,
-  HydrateClientUser,
-  RenderCustomComponent,
-  buildStateFromSchema,
-  formatDocTitle,
-  formatFields,
-} from '@payloadcms/ui'
+import { DocumentHeader } from '@payloadcms/ui/elements/DocumentHeader'
+import { HydrateClientUser } from '@payloadcms/ui/elements/HydrateClientUser'
+import { RenderCustomComponent } from '@payloadcms/ui/elements/RenderCustomComponent'
+import { buildStateFromSchema } from '@payloadcms/ui/forms/buildStateFromSchema'
+import { DocumentInfoProvider } from '@payloadcms/ui/providers/DocumentInfo'
+import { FormQueryParamsProvider } from '@payloadcms/ui/providers/FormQueryParams'
+import { formatDocTitle } from '@payloadcms/ui/utilities/formatDocTitle'
+import { formatFields } from '@payloadcms/ui/utilities/formatFields'
 import { notFound } from 'next/navigation.js'
 import React from 'react'
 

packages/next/src/views/CreateFirstUser/index.client.tsx

@@ -1,7 +1,8 @@
 'use client'
-import type { FieldMap } from '@payloadcms/ui'
+import type { FieldMap } from '@payloadcms/ui/utilities/buildComponentMap'
 
-import { RenderFields, useComponentMap } from '@payloadcms/ui'
+import { RenderFields } from '@payloadcms/ui/forms/RenderFields'
+import { useComponentMap } from '@payloadcms/ui/providers/ComponentMap'
 import React from 'react'
 
 export const CreateFirstUserFields: React.FC<{

packages/next/src/views/CreateFirstUser/index.tsx

@@ -1,7 +1,10 @@
 import type { Field } from 'payload/types'
 import type { AdminViewProps } from 'payload/types'
 
-import { Form, FormSubmit, buildStateFromSchema, mapFields } from '@payloadcms/ui'
+import { Form } from '@payloadcms/ui/forms/Form'
+import { FormSubmit } from '@payloadcms/ui/forms/Submit'
+import { buildStateFromSchema } from '@payloadcms/ui/forms/buildStateFromSchema'
+import { mapFields } from '@payloadcms/ui/utilities/buildComponentMap'
 import React from 'react'
 
 import { CreateFirstUserFields } from './index.client.js'

packages/next/src/views/Dashboard/Default/index.client.tsx

@@ -1,18 +1,15 @@
 'use client'
-import type { EntityToGroup, Group } from '@payloadcms/ui'
+import type { EntityToGroup, Group } from '@payloadcms/ui/utilities/groupNavItems'
 import type { Permissions } from 'payload/auth'
 
 import { getTranslation } from '@payloadcms/translations'
-import {
-  Button,
-  Card,
-  EntityType,
-  SetViewActions,
-  groupNavItems,
-  useAuth,
-  useConfig,
-  useTranslation,
-} from '@payloadcms/ui'
+import { Button } from '@payloadcms/ui/elements/Button'
+import { Card } from '@payloadcms/ui/elements/Card'
+import { SetViewActions } from '@payloadcms/ui/providers/Actions'
+import { useAuth } from '@payloadcms/ui/providers/Auth'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { EntityType, groupNavItems } from '@payloadcms/ui/utilities/groupNavItems'
 import React, { Fragment, useEffect, useState } from 'react'
 
 import './index.scss'

packages/next/src/views/Dashboard/Default/index.tsx

@@ -1,7 +1,9 @@
 import type { Permissions } from 'payload/auth'
 import type { SanitizedConfig } from 'payload/types'
 
-import { Gutter, SetStepNav, SetViewActions } from '@payloadcms/ui'
+import { Gutter } from '@payloadcms/ui/elements/Gutter'
+import { SetStepNav } from '@payloadcms/ui/elements/StepNav'
+import { SetViewActions } from '@payloadcms/ui/providers/Actions'
 import React from 'react'
 
 import { DefaultDashboardClient } from './index.client.js'

packages/next/src/views/Dashboard/index.tsx

@@ -1,6 +1,7 @@
 import type { AdminViewProps } from 'payload/types'
 
-import { HydrateClientUser, RenderCustomComponent } from '@payloadcms/ui'
+import { HydrateClientUser } from '@payloadcms/ui/elements/HydrateClientUser'
+import { RenderCustomComponent } from '@payloadcms/ui/elements/RenderCustomComponent'
 import LinkImport from 'next/link.js'
 import { isEntityHidden } from 'payload/utilities'
 import React, { Fragment } from 'react'

packages/next/src/views/Document/index.tsx

@@ -9,17 +9,15 @@ import type {
 import type { DocumentPermissions } from 'payload/types'
 import type { AdminViewProps } from 'payload/types'
 
-import {
-  DocumentHeader,
-  DocumentInfoProvider,
-  EditDepthProvider,
-  FormQueryParamsProvider,
-  HydrateClientUser,
-  RenderCustomComponent,
-  buildStateFromSchema,
-  formatDocTitle,
-  formatFields,
-} from '@payloadcms/ui'
+import { DocumentHeader } from '@payloadcms/ui/elements/DocumentHeader'
+import { HydrateClientUser } from '@payloadcms/ui/elements/HydrateClientUser'
+import { RenderCustomComponent } from '@payloadcms/ui/elements/RenderCustomComponent'
+import { buildStateFromSchema } from '@payloadcms/ui/forms/buildStateFromSchema'
+import { DocumentInfoProvider } from '@payloadcms/ui/providers/DocumentInfo'
+import { EditDepthProvider } from '@payloadcms/ui/providers/EditDepth'
+import { FormQueryParamsProvider } from '@payloadcms/ui/providers/FormQueryParams'
+import { formatDocTitle } from '@payloadcms/ui/utilities/formatDocTitle'
+import { formatFields } from '@payloadcms/ui/utilities/formatFields'
 import { docAccessOperation } from 'payload/operations'
 import React from 'react'
 

packages/next/src/views/Edit/Default/Auth/APIKey.tsx

@@ -1,22 +1,20 @@
 'use client'
 import type { PayloadRequest } from 'payload/types'
 
-import {
-  CopyToClipboard,
-  GenerateConfirmation,
-  Label,
-  fieldBaseClass,
-  useConfig,
-  useField,
-  useFormFields,
-  useTranslation,
-} from '@payloadcms/ui'
+import { CopyToClipboard } from '@payloadcms/ui/elements/CopyToClipboard'
+import { GenerateConfirmation } from '@payloadcms/ui/elements/GenerateConfirmation'
+import { useFormFields } from '@payloadcms/ui/forms/Form'
+import { Label } from '@payloadcms/ui/forms/Label'
+import { useField } from '@payloadcms/ui/forms/useField'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import { text } from 'payload/fields/validations'
 import React, { useEffect, useMemo, useState } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 
 const path = 'apiKey'
 const baseClass = 'api-key'
+const fieldBaseClass = 'field-type'
 
 export const APIKey: React.FC<{ readOnly?: boolean }> = ({ readOnly }) => {
   const [initialAPIKey, setInitialAPIKey] = useState(null)

packages/next/src/views/Edit/Default/Auth/index.tsx

@@ -1,15 +1,13 @@
 'use client'
-import {
-  Button,
-  Checkbox,
-  ConfirmPassword,
-  Email,
-  Password,
-  useConfig,
-  useFormFields,
-  useFormModified,
-  useTranslation,
-} from '@payloadcms/ui'
+
+import { Button } from '@payloadcms/ui/elements/Button'
+import { Checkbox } from '@payloadcms/ui/fields/Checkbox'
+import { ConfirmPassword } from '@payloadcms/ui/fields/ConfirmPassword'
+import { Email } from '@payloadcms/ui/fields/Email'
+import { Password } from '@payloadcms/ui/fields/Password'
+import { useFormFields, useFormModified } from '@payloadcms/ui/forms/Form'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import React, { useCallback, useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
 

packages/next/src/views/Edit/Default/SetDocumentTitle/index.tsx

@@ -1,7 +1,10 @@
 'use client'
 import type { ClientCollectionConfig, ClientConfig, ClientGlobalConfig } from 'payload/types'
 
-import { formatDocTitle, useDocumentInfo, useFormFields, useTranslation } from '@payloadcms/ui'
+import { useFormFields } from '@payloadcms/ui/forms/Form'
+import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { formatDocTitle } from '@payloadcms/ui/utilities/formatDocTitle'
 import { useEffect, useRef } from 'react'
 
 export const SetDocumentTitle: React.FC<{

packages/next/src/views/Edit/Default/SetStepNav/index.tsx

@@ -1,15 +1,13 @@
 'use client'
-import type { StepNavItem } from '@payloadcms/ui'
+import type { StepNavItem } from '@payloadcms/ui/elements/StepNav'
 import type { SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import {
-  useConfig,
-  useDocumentInfo,
-  useEditDepth,
-  useStepNav,
-  useTranslation,
-} from '@payloadcms/ui'
+import { useStepNav } from '@payloadcms/ui/elements/StepNav'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'
+import { useEditDepth } from '@payloadcms/ui/providers/EditDepth'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import { useEffect } from 'react'
 
 export const SetStepNav: React.FC<{

packages/next/src/views/Edit/Default/index.tsx

@@ -1,22 +1,20 @@
 'use client'
-import type { FormProps } from '@payloadcms/ui'
+import type { FormProps } from '@payloadcms/ui/forms/Form'
 
-import {
-  DocumentControls,
-  DocumentFields,
-  Form,
-  FormLoadingOverlayToggle,
-  OperationProvider,
-  getFormState,
-  useAuth,
-  useComponentMap,
-  useConfig,
-  useDocumentEvents,
-  useDocumentInfo,
-  useEditDepth,
-  useFormQueryParams,
-} from '@payloadcms/ui'
-import { Upload } from '@payloadcms/ui/elements'
+import { DocumentControls } from '@payloadcms/ui/elements/DocumentControls'
+import { DocumentFields } from '@payloadcms/ui/elements/DocumentFields'
+import { FormLoadingOverlayToggle } from '@payloadcms/ui/elements/Loading'
+import { Upload } from '@payloadcms/ui/elements/Upload'
+import { Form } from '@payloadcms/ui/forms/Form'
+import { useAuth } from '@payloadcms/ui/providers/Auth'
+import { useComponentMap } from '@payloadcms/ui/providers/ComponentMap'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useDocumentEvents } from '@payloadcms/ui/providers/DocumentEvents'
+import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'
+import { useEditDepth } from '@payloadcms/ui/providers/EditDepth'
+import { useFormQueryParams } from '@payloadcms/ui/providers/FormQueryParams'
+import { OperationProvider } from '@payloadcms/ui/providers/Operation'
+import { getFormState } from '@payloadcms/ui/utilities/getFormState'
 import { useRouter } from 'next/navigation.js'
 import { useSearchParams } from 'next/navigation.js'
 import React, { Fragment, useCallback } from 'react'

packages/next/src/views/Edit/index.client.tsx

@@ -1,6 +1,9 @@
 'use client'
 
-import { LoadingOverlay, SetViewActions, useComponentMap, useDocumentInfo } from '@payloadcms/ui'
+import { LoadingOverlay } from '@payloadcms/ui/elements/Loading'
+import { SetViewActions } from '@payloadcms/ui/providers/Actions'
+import { useComponentMap } from '@payloadcms/ui/providers/ComponentMap'
+import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'
 import React, { Fragment } from 'react'
 
 export const EditViewClient: React.FC = () => {

packages/next/src/views/ForgotPassword/index.tsx

@@ -1,6 +1,10 @@
 import type { AdminViewProps } from 'payload/types'
 
-import { Button, Email, Form, FormSubmit, Translation } from '@payloadcms/ui'
+import { Button } from '@payloadcms/ui/elements/Button'
+import { Translation } from '@payloadcms/ui/elements/Translation'
+import { Email } from '@payloadcms/ui/fields/Email'
+import { Form } from '@payloadcms/ui/forms/Form'
+import { FormSubmit } from '@payloadcms/ui/forms/Submit'
 import LinkImport from 'next/link.js'
 import React, { Fragment } from 'react'
 

packages/next/src/views/ForgotPassword/meta.ts

@@ -1,4 +1,4 @@
-import type { GenerateViewMetadata } from '../Root/index.jsx'
+import type { GenerateViewMetadata } from '../Root/index.js'
 
 import { meta } from '../../utilities/meta.js'
 

packages/next/src/views/List/Default/Cell/fields/Array/index.tsx

@@ -2,7 +2,7 @@
 import type { CellComponentProps, CellProps } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import { useTranslation } from '@payloadcms/ui'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import React from 'react'
 
 export interface ArrayCellProps extends CellComponentProps<Record<string, unknown>[]> {

packages/next/src/views/List/Default/Cell/fields/Blocks/index.tsx

@@ -2,7 +2,7 @@
 import type { CellComponentProps, CellProps } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import { useTranslation } from '@payloadcms/ui'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import React from 'react'
 
 export interface BlocksCellProps extends CellComponentProps<any> {

packages/next/src/views/List/Default/Cell/fields/Date/index.tsx

@@ -1,7 +1,9 @@
 'use client'
 import type { CellComponentProps, CellProps } from 'payload/types'
 
-import { formatDate, useConfig, useTranslation } from '@payloadcms/ui'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { formatDate } from '@payloadcms/ui/utilities/formatDate'
 import React from 'react'
 
 export interface DateCellProps extends CellComponentProps<string> {

packages/next/src/views/List/Default/Cell/fields/File/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { CellComponentProps } from 'payload/types'
 
-import { Thumbnail } from '@payloadcms/ui'
+import { Thumbnail } from '@payloadcms/ui/elements/Thumbnail'
 import React from 'react'
 
 import './index.scss'

packages/next/src/views/List/Default/Cell/fields/Relationship/index.tsx

@@ -2,7 +2,11 @@
 import type { CellComponentProps, CellProps } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import { canUseDOM, formatDocTitle, useConfig, useIntersect, useTranslation } from '@payloadcms/ui'
+import { useIntersect } from '@payloadcms/ui/hooks/useIntersect'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { canUseDOM } from '@payloadcms/ui/utilities/canUseDOM'
+import { formatDocTitle } from '@payloadcms/ui/utilities/formatDocTitle'
 import React, { useEffect, useState } from 'react'
 
 import { useListRelationships } from '../../../RelationshipProvider/index.js'

packages/next/src/views/List/Default/Cell/fields/Select/index.tsx

@@ -2,7 +2,7 @@
 import type { CellComponentProps, CellProps, OptionObject } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import { useTranslation } from '@payloadcms/ui'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import { optionsAreObjects } from 'payload/types'
 import React from 'react'
 

packages/next/src/views/List/Default/Cell/index.tsx

@@ -5,8 +5,9 @@ import React from 'react' // TODO: abstract this out to support all routers
 import type { CellProps } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import { useConfig, useTableCell, useTranslation } from '@payloadcms/ui'
-import { TableCellProvider } from '@payloadcms/ui'
+import { TableCellProvider, useTableCell } from '@payloadcms/ui/elements/Table'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 
 import { CodeCell } from './fields/Code/index.js'
 import cellComponents from './fields/index.js'

packages/next/src/views/List/Default/RelationshipProvider/index.tsx

@@ -1,7 +1,10 @@
 'use client'
 import type { TypeWithID } from 'payload/types'
 
-import { useConfig, useDebounce, useLocale, useTranslation } from '@payloadcms/ui'
+import { useDebounce } from '@payloadcms/ui/hooks/useDebounce'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useLocale } from '@payloadcms/ui/providers/Locale'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import querystring from 'qs'
 import React, { createContext, useCallback, useContext, useEffect, useReducer, useRef } from 'react'
 
@@ -42,7 +45,7 @@ export const RelationshipProvider: React.FC<{ children?: React.ReactNode }> = ({
   } = config
 
   const loadRelationshipDocs = useCallback(
-    async (reloadAll = false) => {
+    (reloadAll = false) => {
       Object.entries(debouncedDocuments).forEach(async ([slug, docs]) => {
         const idsToLoad: (number | string)[] = []
 
@@ -89,12 +92,12 @@ export const RelationshipProvider: React.FC<{ children?: React.ReactNode }> = ({
   )
 
   useEffect(() => {
-    loadRelationshipDocs(locale && prevLocale.current !== locale)
+    void loadRelationshipDocs(locale && prevLocale.current !== locale)
     prevLocale.current = locale
   }, [locale, loadRelationshipDocs])
 
   const getRelationships = useCallback(
-    async (relationships: { relationTo: string; value: number | string }[]) => {
+    (relationships: { relationTo: string; value: number | string }[]) => {
       dispatchDocuments({ type: 'REQUEST', docs: relationships })
     },
     [],

packages/next/src/views/List/Default/index.tsx

@@ -1,33 +1,29 @@
 'use client'
 
-import type { CollectionComponentMap } from '@payloadcms/ui'
+import type { CollectionComponentMap } from '@payloadcms/ui/utilities/buildComponentMap'
 
 import { getTranslation } from '@payloadcms/translations'
-import {
-  Button,
-  Gutter,
-  ListControls,
-  ListSelection,
-  Pagination,
-  PerPage,
-  Pill,
-  SelectionProvider,
-  StaggeredShimmers,
-  Table,
-  useComponentMap,
-  useConfig,
-  useListInfo,
-  useStepNav,
-  useTranslation,
-  useWindowInfo,
-} from '@payloadcms/ui'
-import {
-  DeleteMany,
-  EditMany,
-  PublishMany,
-  SetViewActions,
-  UnpublishMany,
-} from '@payloadcms/ui/elements'
+import { Button } from '@payloadcms/ui/elements/Button'
+import { DeleteMany } from '@payloadcms/ui/elements/DeleteMany'
+import { EditMany } from '@payloadcms/ui/elements/EditMany'
+import { Gutter } from '@payloadcms/ui/elements/Gutter'
+import { ListControls } from '@payloadcms/ui/elements/ListControls'
+import { ListSelection } from '@payloadcms/ui/elements/ListSelection'
+import { Pagination } from '@payloadcms/ui/elements/Pagination'
+import { PerPage } from '@payloadcms/ui/elements/PerPage'
+import { Pill } from '@payloadcms/ui/elements/Pill'
+import { PublishMany } from '@payloadcms/ui/elements/PublishMany'
+import { StaggeredShimmers } from '@payloadcms/ui/elements/ShimmerEffect'
+import { useStepNav } from '@payloadcms/ui/elements/StepNav'
+import { Table } from '@payloadcms/ui/elements/Table'
+import { UnpublishMany } from '@payloadcms/ui/elements/UnpublishMany'
+import { useWindowInfo } from '@payloadcms/ui/elements/WindowInfo'
+import { SetViewActions } from '@payloadcms/ui/providers/Actions'
+import { useComponentMap } from '@payloadcms/ui/providers/ComponentMap'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useListInfo } from '@payloadcms/ui/providers/ListInfo'
+import { SelectionProvider } from '@payloadcms/ui/providers/Selection'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import LinkImport from 'next/link.js'
 import { formatFilesize } from 'payload/utilities'
 import React, { Fragment, useEffect } from 'react'

packages/next/src/views/List/Default/types.ts

@@ -1,4 +1,4 @@
-import type { ColumnPreferences } from '@payloadcms/ui'
+import type { ColumnPreferences } from '@payloadcms/ui/providers/ListInfo'
 import type { SanitizedCollectionConfig } from 'payload/types'
 
 export type DefaultListViewProps = {

packages/next/src/views/List/index.tsx

@@ -1,11 +1,9 @@
 import type { Where } from 'payload/types'
 
-import {
-  HydrateClientUser,
-  ListInfoProvider,
-  RenderCustomComponent,
-  TableColumnsProvider,
-} from '@payloadcms/ui'
+import { HydrateClientUser } from '@payloadcms/ui/elements/HydrateClientUser'
+import { RenderCustomComponent } from '@payloadcms/ui/elements/RenderCustomComponent'
+import { TableColumnsProvider } from '@payloadcms/ui/elements/TableColumns'
+import { ListInfoProvider } from '@payloadcms/ui/providers/ListInfo'
 import { notFound } from 'next/navigation.js'
 import { createClientCollectionConfig } from 'payload/config'
 import { type AdminViewProps } from 'payload/types'

packages/next/src/views/LivePreview/Device/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useResize } from '@payloadcms/ui'
+import { useResize } from '@payloadcms/ui/hooks/useResize'
 import React, { useEffect } from 'react'
 
 import { useLivePreviewContext } from '../Context/context.js'

packages/next/src/views/LivePreview/Preview/index.tsx

@@ -2,12 +2,10 @@
 
 import type { EditViewProps } from 'payload/types'
 
-import {
-  ShimmerEffect,
-  reduceFieldsToValues,
-  useAllFormFields,
-  useDocumentEvents,
-} from '@payloadcms/ui'
+import { ShimmerEffect } from '@payloadcms/ui/elements/ShimmerEffect'
+import { useAllFormFields } from '@payloadcms/ui/forms/Form'
+import { useDocumentEvents } from '@payloadcms/ui/providers/DocumentEvents'
+import { reduceFieldsToValues } from '@payloadcms/ui/utilities/reduceFieldsToValues'
 import React, { useEffect } from 'react'
 
 import { useLivePreviewContext } from '../Context/context.js'

packages/next/src/views/LivePreview/Toolbar/Controls/index.tsx

@@ -2,7 +2,10 @@
 
 import type { EditViewProps } from 'payload/types'
 
-import { Chevron, LinkIcon, Popup, PopupList, X } from '@payloadcms/ui'
+import { Popup, PopupList } from '@payloadcms/ui/elements/Popup'
+import { Chevron } from '@payloadcms/ui/icons/Chevron'
+import { LinkIcon } from '@payloadcms/ui/icons/Link'
+import { X } from '@payloadcms/ui/icons/X'
 import React from 'react'
 
 import { useLivePreviewContext } from '../../Context/context.js'

packages/next/src/views/LivePreview/Toolbar/index.tsx

@@ -2,7 +2,7 @@
 import type { EditViewProps } from 'payload/types'
 
 import { useDraggable } from '@dnd-kit/core'
-import { DragHandle } from '@payloadcms/ui'
+import { DragHandle } from '@payloadcms/ui/icons/DragHandle'
 import React from 'react'
 
 import { useLivePreviewContext } from '../Context/context.js'

packages/next/src/views/LivePreview/index.client.tsx

@@ -1,21 +1,20 @@
 'use client'
-import type { FieldMap, FormProps } from '@payloadcms/ui'
+import type { FormProps } from '@payloadcms/ui/forms/Form'
+import type { FieldMap } from '@payloadcms/ui/utilities/buildComponentMap'
 import type { LivePreviewConfig } from 'payload/config'
 import type { ClientCollectionConfig, ClientConfig, ClientGlobalConfig, Data } from 'payload/types'
 
-import {
-  DocumentControls,
-  DocumentFields,
-  Form,
-  LoadingOverlay,
-  OperationProvider,
-  SetViewActions,
-  getFormState,
-  useComponentMap,
-  useConfig,
-  useDocumentInfo,
-  useTranslation,
-} from '@payloadcms/ui'
+import { DocumentControls } from '@payloadcms/ui/elements/DocumentControls'
+import { DocumentFields } from '@payloadcms/ui/elements/DocumentFields'
+import { LoadingOverlay } from '@payloadcms/ui/elements/Loading'
+import { Form } from '@payloadcms/ui/forms/Form'
+import { SetViewActions } from '@payloadcms/ui/providers/Actions'
+import { useComponentMap } from '@payloadcms/ui/providers/ComponentMap'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'
+import { OperationProvider } from '@payloadcms/ui/providers/Operation'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { getFormState } from '@payloadcms/ui/utilities/getFormState'
 import React, { Fragment, useCallback } from 'react'
 
 import { LeaveWithoutSaving } from '../../elements/LeaveWithoutSaving/index.js'

packages/next/src/views/LivePreview/usePopupWindow.ts

@@ -1,5 +1,5 @@
 'use client'
-import { useConfig } from '@payloadcms/ui'
+import { useConfig } from '@payloadcms/ui/providers/Config'
 import { useCallback, useEffect, useRef, useState } from 'react'
 
 export interface PopupMessage {

packages/next/src/views/Login/LoginForm/index.tsx

@@ -1,14 +1,5 @@
 'use client'
 
-import {
-  Email,
-  Form,
-  FormLoadingOverlayToggle,
-  FormSubmit,
-  Password,
-  useConfig,
-  useTranslation,
-} from '@payloadcms/ui'
 import LinkImport from 'next/link.js'
 import React from 'react'
 
@@ -17,6 +8,13 @@ const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.
 
 import type { FormState } from 'payload/types'
 
+import { FormLoadingOverlayToggle } from '@payloadcms/ui/elements/Loading'
+import { Email } from '@payloadcms/ui/fields/Email'
+import { Password } from '@payloadcms/ui/fields/Password'
+import { Form } from '@payloadcms/ui/forms/Form'
+import { FormSubmit } from '@payloadcms/ui/forms/Submit'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import { useRouter } from 'next/navigation.js'
 
 import './index.scss'

packages/next/src/views/Login/index.tsx

@@ -1,6 +1,6 @@
 import type { AdminViewProps } from 'payload/types'
 
-import { Logo } from '@payloadcms/ui'
+import { Logo } from '@payloadcms/ui/graphics/Logo'
 import { redirect } from 'next/navigation.js'
 import React, { Fragment } from 'react'
 

packages/next/src/views/Logout/LogoutClient.tsx

@@ -1,6 +1,7 @@
 'use client'
-import { Button, useTranslation } from '@payloadcms/ui'
-import { useAuth } from '@payloadcms/ui/providers'
+import { Button } from '@payloadcms/ui/elements/Button'
+import { useAuth } from '@payloadcms/ui/providers/Auth'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import LinkImport from 'next/link.js'
 import React, { Fragment, useEffect } from 'react'
 

packages/next/src/views/Logout/index.tsx

@@ -1,6 +1,6 @@
 import type { AdminViewProps } from 'payload/types'
 
-import { MinimalTemplate } from '@payloadcms/ui'
+import { MinimalTemplate } from '@payloadcms/ui/templates/Minimal'
 import React from 'react'
 
 import { LogoutClient } from './LogoutClient.js'

packages/next/src/views/NotFound/index.client.tsx

@@ -1,5 +1,9 @@
 'use client'
-import { Button, Gutter, useConfig, useStepNav, useTranslation } from '@payloadcms/ui'
+import { Button } from '@payloadcms/ui/elements/Button'
+import { Gutter } from '@payloadcms/ui/elements/Gutter'
+import { useStepNav } from '@payloadcms/ui/elements/StepNav'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import LinkImport from 'next/link.js'
 import React, { useEffect } from 'react'
 

packages/next/src/views/NotFound/index.tsx

@@ -1,6 +1,6 @@
 import type { AdminViewComponent } from 'payload/types'
 
-import { DefaultTemplate } from '@payloadcms/ui'
+import { DefaultTemplate } from '@payloadcms/ui/templates/Default'
 import React from 'react'
 
 import { NotFoundClient } from './index.client.js'

packages/next/src/views/ResetPassword/index.tsx

@@ -1,15 +1,13 @@
 import type { AdminViewProps } from 'payload/types'
 
-import {
-  Button,
-  ConfirmPassword,
-  Form,
-  FormSubmit,
-  HiddenInput,
-  MinimalTemplate,
-  Password,
-  Translation,
-} from '@payloadcms/ui'
+import { Button } from '@payloadcms/ui/elements/Button'
+import { Translation } from '@payloadcms/ui/elements/Translation'
+import { ConfirmPassword } from '@payloadcms/ui/fields/ConfirmPassword'
+import { HiddenInput } from '@payloadcms/ui/fields/HiddenInput'
+import { Password } from '@payloadcms/ui/fields/Password'
+import { Form } from '@payloadcms/ui/forms/Form'
+import { FormSubmit } from '@payloadcms/ui/forms/Submit'
+import { MinimalTemplate } from '@payloadcms/ui/templates/Minimal'
 import LinkImport from 'next/link.js'
 import React from 'react'
 
@@ -56,7 +54,7 @@ export const ResetPassword: React.FC<AdminViewProps> = ({ initPageResult, params
           <p>
             <Translation
               elements={{
-                '0': ({ children }) => <Link children={children} href={`${admin}/account`} />,
+                '0': ({ children }) => <Link href={`${admin}/account`}>{children}</Link>,
               }}
               i18nKey="authentication:loggedInChangePassword"
               t={i18n.t}

packages/next/src/views/Root/index.tsx

@@ -2,7 +2,8 @@ import type { I18n } from '@payloadcms/translations'
 import type { Metadata } from 'next'
 import type { SanitizedConfig } from 'payload/types'
 
-import { DefaultTemplate, MinimalTemplate } from '@payloadcms/ui'
+import { DefaultTemplate } from '@payloadcms/ui/templates/Default'
+import { MinimalTemplate } from '@payloadcms/ui/templates/Minimal'
 import { notFound, redirect } from 'next/navigation.js'
 import React from 'react'
 

packages/next/src/views/Unauthorized/index.tsx

@@ -1,6 +1,7 @@
 import type { AdminViewComponent } from 'payload/types'
 
-import { Button, Gutter } from '@payloadcms/ui'
+import { Button } from '@payloadcms/ui/elements/Button'
+import { Gutter } from '@payloadcms/ui/elements/Gutter'
 import LinkImport from 'next/link.js'
 import React from 'react'
 

packages/next/src/views/Verify/index.tsx

@@ -1,6 +1,6 @@
 import type { AdminViewProps } from 'payload/types'
 
-import { Logo } from '@payloadcms/ui'
+import { Logo } from '@payloadcms/ui/graphics/Logo'
 import { redirect } from 'next/navigation.js'
 import React from 'react'
 

packages/next/src/views/Version/Default/SetStepNav.tsx

@@ -1,9 +1,14 @@
-import type { FieldMap, StepNavItem } from '@payloadcms/ui'
+import type { StepNavItem } from '@payloadcms/ui/elements/StepNav'
+import type { FieldMap } from '@payloadcms/ui/utilities/buildComponentMap'
 import type { ClientCollectionConfig, ClientGlobalConfig } from 'payload/types'
 import type React from 'react'
 
 import { getTranslation } from '@payloadcms/translations'
-import { formatDate, useConfig, useLocale, useStepNav, useTranslation } from '@payloadcms/ui'
+import { useStepNav } from '@payloadcms/ui/elements/StepNav'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useLocale } from '@payloadcms/ui/providers/Locale'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { formatDate } from '@payloadcms/ui/utilities/formatDate'
 import { useEffect } from 'react'
 
 export const SetStepNav: React.FC<{

packages/next/src/views/Version/Default/index.tsx

@@ -1,16 +1,14 @@
 'use client'
-import type { Option } from '@payloadcms/ui'
+import type { OptionObject } from 'payload/types'
 
-import {
-  Gutter,
-  SetViewActions,
-  formatDate,
-  useComponentMap,
-  useConfig,
-  useDocumentInfo,
-  usePayloadAPI,
-  useTranslation,
-} from '@payloadcms/ui'
+import { Gutter } from '@payloadcms/ui/elements/Gutter'
+import usePayloadAPI from '@payloadcms/ui/hooks/usePayloadAPI'
+import { SetViewActions } from '@payloadcms/ui/providers/Actions'
+import { useComponentMap } from '@payloadcms/ui/providers/ComponentMap'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { formatDate } from '@payloadcms/ui/utilities/formatDate'
 import React, { useState } from 'react'
 
 import type { CompareOption, DefaultVersionsViewProps } from './types.js'
@@ -52,7 +50,7 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
 
   const [globalConfig] = useState(() => config.globals.find((global) => global.slug === globalSlug))
 
-  const [locales, setLocales] = useState<Option[]>(localeOptions)
+  const [locales, setLocales] = useState<OptionObject[]>(localeOptions)
   const [compareValue, setCompareValue] = useState<CompareOption>(mostRecentVersionOption)
 
   const {

packages/next/src/views/Version/Default/types.ts

@@ -1,5 +1,5 @@
-import type { Option } from '@payloadcms/ui'
 import type { CollectionPermission, GlobalPermission } from 'payload/auth'
+import type { OptionObject } from 'payload/types'
 import type { Document } from 'payload/types'
 
 export type CompareOption = {
@@ -13,7 +13,7 @@ export type DefaultVersionsViewProps = {
   doc: Document
   docPermissions: CollectionPermission | GlobalPermission
   initialComparisonDoc: Document
-  localeOptions: Option[]
+  localeOptions: OptionObject[]
   mostRecentDoc: Document
   publishedDoc: Document
   versionID?: string

packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx

@@ -1,4 +1,4 @@
-import type { MappedField } from '@payloadcms/ui'
+import type { MappedField } from '@payloadcms/ui/utilities/buildComponentMap'
 
 import { getTranslation } from '@payloadcms/translations'
 import { getUniqueListBy } from 'payload/utilities'

packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx

@@ -1,8 +1,9 @@
 'use client'
+import type { MappedField } from '@payloadcms/ui/utilities/buildComponentMap'
 import type { ClientCollectionConfig } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import { type MappedField, useConfig } from '@payloadcms/ui'
+import { useConfig } from '@payloadcms/ui/providers/Config'
 import { fieldAffectsData, fieldIsPresentationalOnly } from 'payload/types'
 import React from 'react'
 import ReactDiffViewerImport from 'react-diff-viewer-continued'

packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx

@@ -1,6 +1,6 @@
 import type { I18n } from '@payloadcms/translations'
-import type { SelectFieldProps } from '@payloadcms/ui'
-import type { MappedField } from '@payloadcms/ui/utilities'
+import type { SelectFieldProps } from '@payloadcms/ui/fields/Select'
+import type { MappedField } from '@payloadcms/ui/utilities/buildComponentMap'
 import type { OptionObject, SelectField } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'

packages/next/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.tsx

@@ -1,5 +1,5 @@
-import type { TabsFieldProps } from '@payloadcms/ui/forms'
-import type { MappedField } from '@payloadcms/ui/utilities'
+import type { TabsFieldProps } from '@payloadcms/ui/fields/Tabs'
+import type { MappedField } from '@payloadcms/ui/utilities/buildComponentMap'
 
 import React from 'react'
 

packages/next/src/views/Version/RenderFieldsToDiff/fields/types.ts

@@ -1,5 +1,5 @@
 import type { I18n } from '@payloadcms/translations'
-import type { FieldMap, MappedField } from '@payloadcms/ui'
+import type { FieldMap, MappedField } from '@payloadcms/ui/utilities/buildComponentMap'
 import type { FieldPermissions } from 'payload/auth'
 import type React from 'react'
 import type { DiffMethod } from 'react-diff-viewer-continued'

packages/next/src/views/Version/RenderFieldsToDiff/types.ts

@@ -1,5 +1,5 @@
 import type { I18n } from '@payloadcms/translations'
-import type { FieldMap, MappedField } from '@payloadcms/ui'
+import type { FieldMap, MappedField } from '@payloadcms/ui/utilities/buildComponentMap'
 import type { FieldPermissions } from 'payload/auth'
 import type { DiffMethod } from 'react-diff-viewer-continued'
 

packages/next/src/views/Version/Restore/index.tsx

@@ -1,14 +1,11 @@
 'use client'
 import { getTranslation } from '@payloadcms/translations'
-import {
-  Button,
-  MinimalTemplate,
-  Modal,
-  Pill,
-  useConfig,
-  useModal,
-  useTranslation,
-} from '@payloadcms/ui'
+import { Button } from '@payloadcms/ui/elements/Button'
+import { Modal, useModal } from '@payloadcms/ui/elements/Modal'
+import { Pill } from '@payloadcms/ui/elements/Pill'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { MinimalTemplate } from '@payloadcms/ui/templates/Minimal'
 import React, { Fragment, useCallback, useState } from 'react'
 import { toast } from 'react-toastify'
 

packages/next/src/views/Version/SelectComparison/index.tsx

@@ -2,8 +2,11 @@
 import type { PaginatedDocs } from 'payload/database'
 import type { Where } from 'payload/types'
 
-import { useTranslation } from '@payloadcms/ui'
-import { ReactSelect, fieldBaseClass, formatDate, useConfig } from '@payloadcms/ui'
+import { ReactSelect } from '@payloadcms/ui/elements/ReactSelect'
+import { fieldBaseClass } from '@payloadcms/ui/fields/shared'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { formatDate } from '@payloadcms/ui/utilities/formatDate'
 import qs from 'qs'
 import React, { useCallback, useEffect, useState } from 'react'
 

packages/next/src/views/Version/SelectLocales/index.tsx

@@ -1,5 +1,6 @@
-import { useTranslation } from '@payloadcms/ui'
-import { ReactSelect, useLocale } from '@payloadcms/ui'
+import { ReactSelect } from '@payloadcms/ui/elements/ReactSelect'
+import { useLocale } from '@payloadcms/ui/providers/Locale'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import React from 'react'
 
 import type { Props } from './types.js'

packages/next/src/views/Version/SelectLocales/types.ts

@@ -1,7 +1,7 @@
-import type { Option } from '@payloadcms/ui'
+import type { OptionObject } from 'payload/types'
 
 export type Props = {
-  onChange: (options: Option[]) => void
-  options: Option[]
-  value: Option[]
+  onChange: (options: OptionObject[]) => void
+  options: OptionObject[]
+  value: OptionObject[]
 }

packages/next/src/views/Version/index.tsx

@@ -1,5 +1,5 @@
-import type { Option } from '@payloadcms/ui'
 import type { CollectionPermission, GlobalPermission } from 'payload/auth'
+import type { OptionObject } from 'payload/types'
 import type { Document, EditViewComponent } from 'payload/types'
 
 import { notFound } from 'next/navigation.js'
@@ -108,7 +108,7 @@ export const VersionView: EditViewComponent = async (props) => {
     }
   }
 
-  const localeOptions: Option[] =
+  const localeOptions: OptionObject[] =
     localization &&
     localization?.locales &&
     localization.locales.map(({ code, label }) => ({

packages/next/src/views/Version/meta.ts

@@ -1,7 +1,7 @@
 import type { Metadata } from 'next'
 
 import { getTranslation } from '@payloadcms/translations'
-import { formatDate } from '@payloadcms/ui'
+import { formatDate } from '@payloadcms/ui/utilities/formatDate'
 
 import type { GenerateEditViewMetadata } from '../Document/getMetaBySegment.js'
 

packages/next/src/views/Versions/buildColumns.tsx

@@ -1,12 +1,12 @@
 import type { I18n } from '@payloadcms/translations'
-import type { Column } from '@payloadcms/ui'
+import type { Column } from '@payloadcms/ui/elements/Table'
 import type {
   SanitizedCollectionConfig,
   SanitizedConfig,
   SanitizedGlobalConfig,
 } from 'payload/types'
 
-import { SortColumn } from '@payloadcms/ui'
+import { SortColumn } from '@payloadcms/ui/elements/SortColumn'
 import React from 'react'
 
 import { AutosaveCell } from './cells/AutosaveCell/index.js'

packages/next/src/views/Versions/cells/AutosaveCell/index.tsx

@@ -1,5 +1,7 @@
 'use client'
-import { Pill, useTableCell, useTranslation } from '@payloadcms/ui'
+import { Pill } from '@payloadcms/ui/elements/Pill'
+import { useTableCell } from '@payloadcms/ui/elements/Table'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import React, { Fragment } from 'react'
 
 export const AutosaveCell: React.FC = () => {

packages/next/src/views/Versions/cells/CreatedAt/index.tsx

@@ -1,5 +1,8 @@
 'use client'
-import { formatDate, useConfig, useTableCell, useTranslation } from '@payloadcms/ui'
+import { useTableCell } from '@payloadcms/ui/elements/Table'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { formatDate } from '@payloadcms/ui/utilities/formatDate'
 import LinkImport from 'next/link.js'
 import React from 'react'
 

packages/next/src/views/Versions/cells/ID/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useTableCell } from '@payloadcms/ui'
+import { useTableCell } from '@payloadcms/ui/elements/Table'
 import React, { Fragment } from 'react'
 
 export const IDCell: React.FC = () => {

packages/next/src/views/Versions/index.client.tsx

@@ -1,19 +1,16 @@
 'use client'
-import type { Column } from '@payloadcms/ui'
 import type { PaginatedDocs } from 'payload/database'
 import type { SanitizedCollectionConfig } from 'payload/types'
 
-import {
-  LoadingOverlayToggle,
-  Pagination,
-  PerPage,
-  SetViewActions,
-  Table,
-  useComponentMap,
-  useDocumentInfo,
-  usePayloadAPI,
-  useTranslation,
-} from '@payloadcms/ui'
+import { LoadingOverlayToggle } from '@payloadcms/ui/elements/Loading'
+import { Pagination } from '@payloadcms/ui/elements/Pagination'
+import { PerPage } from '@payloadcms/ui/elements/PerPage'
+import { type Column, Table } from '@payloadcms/ui/elements/Table'
+import usePayloadAPI from '@payloadcms/ui/hooks/usePayloadAPI'
+import { SetViewActions } from '@payloadcms/ui/providers/Actions'
+import { useComponentMap } from '@payloadcms/ui/providers/ComponentMap'
+import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import { useSearchParams } from 'next/navigation.js'
 import React, { Fragment, useEffect, useRef } from 'react'
 

packages/next/src/views/Versions/index.tsx

@@ -1,6 +1,6 @@
 import type { EditViewComponent } from 'payload/types'
 
-import { Gutter } from '@payloadcms/ui'
+import { Gutter } from '@payloadcms/ui/elements/Gutter'
 import { notFound } from 'next/navigation.js'
 import React from 'react'
 

packages/next/tsconfig.json

@@ -6,13 +6,7 @@
     "emitDeclarationOnly": true,
     "outDir": "./dist" /* Specify an output folder for all emitted files. */,
     "rootDir": "./src" /* Specify the root folder within your source files. */,
-    "sourceMap": true,
-    "paths": {
-      "@payloadcms/ui": ["../ui/src/exports/index.ts"],
-      "@payloadcms/ui/*": ["../ui/src/exports/*"],
-      "@payloadcms/ui/scss": ["../ui/src/scss/styles.scss"],
-      "@payloadcms/ui/scss/app.scss": ["../ui/src/scss/app.scss"]
-    }
+    "sourceMap": true
   },
   "exclude": [
     "src/**/*.spec.js",

packages/next/webpack.config.js

@@ -9,7 +9,7 @@ const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
 
 const componentWebpackConfig = {
-  entry: path.resolve(dirname, './src/index.ts'),
+  entry: path.resolve(dirname, './src/index.js'),
   externals: [
     'react',
     'react-dom',

packages/payload/src/collections/config/schema.ts

@@ -1,7 +1,11 @@
 import joi from 'joi'
 
 import { endpointsSchema } from '../../config/schema.js'
-import { componentSchema, customViewSchema, livePreviewSchema, } from '../../config/shared/componentSchema.js'
+import {
+  componentSchema,
+  customViewSchema,
+  livePreviewSchema,
+} from '../../config/shared/componentSchema.js'
 
 const strategyBaseSchema = joi.object().keys({
   logout: joi.boolean(),