chore: finishes next dependency imports

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,5 +1,6 @@
 'use client'
-import type { FieldMap, FormProps } from '@payloadcms/ui'
+import type { Props as FormProps } from '@payloadcms/ui/forms/Form'
+import type { FieldMap } from '@payloadcms/ui/providers/ComponentMap'
 import type { LivePreviewConfig } from 'payload/config'
 import type {
   ClientConfig,
@@ -8,19 +9,17 @@ import type {
   SanitizedGlobalConfig,
 } 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/providers/ComponentMap'
 import type { SanitizedCollectionConfig, SanitizedGlobalConfig } 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/providers/ComponentMap'
 
 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/providers/ComponentMap'
 import type { ClientConfig } 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 'packages/ui/src/forms/fields/Select/types.js'
-import type { MappedField } from 'packages/ui/src/providers/ComponentMap/buildComponentMap/types.js'
+import type { SelectFieldProps } from '@payloadcms/ui/fields/Select'
+import type { MappedField } from '@payloadcms/ui/providers/ComponentMap'
 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 'packages/ui/src/forms/fields/Tabs/types.js'
-import type { MappedField } from 'packages/ui/src/providers/ComponentMap/buildComponentMap/types.js'
+import type { TabsFieldProps } from '@payloadcms/ui/fields/Tabs'
+import type { MappedField } from '@payloadcms/ui/providers/ComponentMap'
 
 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/providers/ComponentMap'
 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/providers/ComponentMap'
 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/ui/src/providers/ComponentMap/index.tsx

@@ -84,4 +84,4 @@ export const useComponentMap = (): IComponentMapContext => useContext(ComponentM
 
 export { buildComponentMap } from './buildComponentMap/index.js'
 export { mapFields } from './buildComponentMap/mapFields.js'
-export type { FieldMap } from './buildComponentMap/types.js'
+export type { FieldMap, MappedField } from './buildComponentMap/types.js'