From f1082e28c741c3fbaf792bd702ef3371d37d8914 Mon Sep 17 00:00:00 2001 From: Brian-An <126034775+Brian-An@users.noreply.github.com> Date: Wed, 14 Oct 2026 03:16:00 -0400 Subject: [PATCH] chore: migrate Framer Motion imports to Motion (#51520) ## Problem Closes #31221. The applications and shared UI packages still import the former `framer-motion` package instead of Motion's React entry point. ## Solution Replace runtime imports, type imports, and three test mocks with `motion/react` across the consuming workspaces. Replace the seven direct dependency declarations with `motion: ^11.18.2`. Preserve the existing animation engine version and all other dependency resolutions, including the asynchronous `domMax` feature loader. Historical blog examples remain as published; `framer-motion` remains a transitive implementation dependency of Motion. ## Review instructions 1. Run `pnpm install --frozen-lockfile` and check the seven dependency replacements in the lockfile. 2. Open the WWW Auth page and Docs homepage at desktop and mobile widths, with normal and reduced motion preferences. 3. Open the mobile navigation, expand Product on WWW, and close the menu using Escape and the close button. 4. Check the existing animation components, shared form validation, and Studio tests for unchanged behavior. Validation: - Studio: 731 test files, 8,334 passing tests and one expected failure, with `--maxWorkers=4`. - Shared UI, UI patterns, WWW, and UI library: 615 passing tests. - `pnpm run typecheck --concurrency=1`: all 16 repository tasks pass. - All six application source lint scripts and lint ratchets pass; generated Docs example copies are excluded from local lint. - Repository Prettier source check, lockfile formatting, and case hazard check pass. - WWW: 10 existing end-to-end checks across nine pages. - Docs: 5 existing guide link and accessibility checks across Database and Auth. - WWW and Docs mobile navigation pass at desktop/mobile sizes with normal/reduced motion; SQL-to-REST translation tabs exercise the asynchronous feature loader without browser errors. - Frozen-lockfile installation passes; all existing package and snapshot resolutions are unchanged. - Learn and UI library command palettes open, filter results, and close with Escape without browser errors. - Independent code review finds no actionable defects. - `npm run build -- --filter=www --filter=docs --filter=studio --filter=learn --filter=library --concurrency=1 --continue=always`: all five affected applications build successfully (9 tasks including prerequisites); asset uploads disabled for local validation. ## Checklist - [x] I have read [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) - [x] If I wrote a new docs topic or edited an existing topic, I used the `/write-the-docs` or `/edit-the-docs` skill, which applies the docs [style guide](https://github.com/supabase/supabase/tree/master/apps/docs/style-guide) (no docs topics changed) --------- Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com> --- apps/docs/components/DocsCoverLogo.tsx | 2 +- .../NavigationMenu/GlobalMobileMenu.tsx | 2 +- apps/docs/package.json | 2 +- apps/learn/components/command.tsx | 2 +- apps/learn/package.json | 2 +- .../footer/operations/SaveQueueActionBar.tsx | 2 +- .../grid/components/header/Header.tsx | 2 +- .../interfaces/APIKeys/APIKeyRow.tsx | 2 +- .../App/GitHubConfigDriftBanner.tsx | 2 +- .../AuditLogs/AuditLogsSelectionHeader.tsx | 2 +- .../Auth/EmailTemplates/SpamValidation.tsx | 2 +- .../SessionsAuthSettingsForm.test.tsx | 2 +- .../BranchManagement/WorkflowLogsCard.tsx | 2 +- .../DestinationForm/index.test.tsx | 2 +- .../DestinationForm/index.tsx | 2 +- .../DiskManagement/DiskManagementForm.tsx | 2 +- .../DiskManagementRestartRequiredSection.tsx | 2 +- .../DiskManagement/fields/ThroughputField.tsx | 2 +- .../DiskManagement/ui/BillingChangeBadge.tsx | 2 +- .../ui/ComputeSizeRecommendationSection.tsx | 2 +- .../DiskManagement/ui/DiskCountdownRadial.tsx | 2 +- .../ui/DiskManagementReadReplicas.tsx | 2 +- .../DiskManagement/ui/DiskSpaceBar.tsx | 2 +- .../ui/DiskTypeRecommendationSection.tsx | 2 +- .../DiskManagement/ui/FormMessage.tsx | 2 +- .../DiskManagement/ui/NoticeBar.tsx | 2 +- .../ui/SpendCapDisabledSection.tsx | 2 +- .../CronJobScheduleSection.tsx | 2 +- .../IntegrationOverviewTab.test.tsx | 2 +- .../Integration/MarkdownContent.tsx | 2 +- .../jwt-secret-keys-table/index.tsx | 2 +- .../jwt-secret-keys-table/signing-key-row.tsx | 2 +- .../interfaces/LogDrains/AnimatedLogos.tsx | 2 +- .../Subscription/EnterpriseCard.tsx | 2 +- .../BillingSettings/Subscription/PlanCard.tsx | 2 +- .../Subscription/PlanCards.tsx | 2 +- .../Subscription/PlanCards.utils.ts | 2 +- .../Subscription/PlanUpdatePanelShell.tsx | 2 +- .../interfaces/Organization/HeaderBanner.tsx | 2 +- .../Realtime/Inspector/AnimatedCursors.tsx | 2 +- .../GitHubIntegrationConnectionForm.tsx | 2 +- apps/studio/components/interfaces/Sidebar.tsx | 2 +- .../interfaces/SignIn/SignUpForm.tsx | 2 +- .../BucketFilePickerColumn.tsx | 2 +- .../BucketVersioningFields.tsx | 2 +- .../LifecyclePolicySection.tsx | 2 +- .../StorageExplorer/FileExplorerColumn.tsx | 2 +- .../interfaces/Support/AIAssistantOption.tsx | 2 +- .../interfaces/Support/DiscordCTACard.tsx | 2 +- .../interfaces/Support/IncidentAdmonition.tsx | 2 +- .../interfaces/Support/ProjectAndPlanInfo.tsx | 2 +- .../ExplorerLayout.constants.tsx | 2 +- .../layouts/ExplorerLayout/ExplorerLayout.tsx | 2 +- .../ExplorerLayout/ExplorerNavHome.tsx | 2 +- .../components/layouts/InterstitialLayout.tsx | 2 +- .../FloatingMobileToolbar.tsx | 2 +- .../FeedbackDropdown/FeedbackWidget.tsx | 2 +- .../Navigation/LayoutHeader/LayoutHeader.tsx | 2 +- .../layouts/ProjectLayout/index.test.tsx | 2 +- .../layouts/ProjectLayout/index.tsx | 2 +- .../ProjectNeedsSecuring.tsx | 2 +- .../components/layouts/Tabs/RecentItems.tsx | 2 +- .../components/layouts/Tabs/SortableTab.tsx | 2 +- .../components/layouts/Tabs/TabPreview.tsx | 2 +- apps/studio/components/layouts/Tabs/Tabs.tsx | 2 +- .../ui/AIAssistantPanel/AssistantChat.tsx | 2 +- .../ui/AIAssistantPanel/AssistantChatForm.tsx | 4 +- apps/studio/components/ui/AIEditor/index.tsx | 2 +- .../components/ui/BannerStack/BannerStack.tsx | 2 +- .../ui/BannerStack/Banners/BannerExplorer.tsx | 2 +- apps/studio/components/ui/FeatureBanner.tsx | 2 +- .../ui/FileExplorerAndEditor/index.tsx | 2 +- .../components/ui/FormSectionCollapse.tsx | 2 +- apps/studio/package.json | 2 +- apps/ui-library/components/command.tsx | 2 +- apps/ui-library/package.json | 2 +- .../(home)/_components/CommunitySectionV2.tsx | 2 +- .../_components/CustomerStoriesSection.tsx | 2 +- .../_components/DashboardFeaturesSection.tsx | 2 +- .../_components/FrameworksSectionClient.tsx | 2 +- .../(home)/_components/OpenSourceSection.tsx | 2 +- .../auth/_components/ApiSectionClient.tsx | 2 +- .../auth/_components/FeaturesSection.tsx | 2 +- .../auth/_components/RLSSectionClient.tsx | 2 +- .../compute/_components/ComputeVisual.tsx | 2 +- .../compute/_components/DeploySection.tsx | 2 +- .../database/_components/ApiSectionClient.tsx | 2 +- .../database/_components/FeaturesSection.tsx | 2 +- .../database/_components/SqlEditorSection.tsx | 2 +- .../_components/TableEditorSection.tsx | 2 +- .../database/_components/VisualDemo.tsx | 2 +- .../edge-functions/_components/CTASection.tsx | 2 +- .../_components/IntegratesSectionClient.tsx | 2 +- .../realtime/_components/ApiSectionClient.tsx | 2 +- .../realtime/_components/FeaturesSection.tsx | 2 +- .../storage/_components/ApiSectionClient.tsx | 2 +- .../_components/PermissionsSectionClient.tsx | 2 +- apps/www/app/blog/BlogHero.tsx | 2 +- .../catalog/[slug]/PartnerCatalogDetail.tsx | 2 +- .../StateOfStartups2026Content.tsx | 2 +- .../StateOfStartupsAuroraHeader.tsx | 2 +- .../components/SurveyChart.tsx | 2 +- .../components/YearToggle.tsx | 2 +- .../register/RegisterContent.tsx | 2 +- apps/www/components/AIDemo/DotGrid.tsx | 2 +- apps/www/components/AIDemo/Panel.tsx | 2 +- apps/www/components/AIDemo/SqlSnippet.tsx | 2 +- apps/www/components/Blog/BlogFilters.tsx | 2 +- apps/www/components/Blog/BlogViewToggle.tsx | 2 +- .../CustomerStories/CustomersFilters.tsx | 2 +- apps/www/components/EnterpriseFormQuotes.tsx | 2 +- apps/www/components/Events/EventsFilters.tsx | 2 +- apps/www/components/Hero/HeroFrameworks.tsx | 7 +- apps/www/components/ImageGrid.tsx | 2 +- .../LaunchWeek/11/Releases/BuildStage.tsx | 2 +- .../11/Releases/components/AdventCard.tsx | 8 +-- .../LaunchWeek/12/Releases/BuildStage.tsx | 2 +- .../12/Releases/components/BuildCard.tsx | 8 +-- .../LaunchWeek/13/Releases/BuildStage.tsx | 2 +- .../13/Releases/components/BuildCard.tsx | 8 +-- .../LaunchWeek/14/Releases/BuildStage.tsx | 2 +- .../14/Releases/components/BuildCard.tsx | 8 +-- .../LaunchWeek/15/LW15BuildStage.tsx | 9 ++- .../LaunchWeek/15/LW15Hackathon.tsx | 2 +- .../components/LaunchWeek/15/LW15Meetups.tsx | 15 ++-- .../www/components/LaunchWeek/7/BlogLinks.tsx | 2 +- .../components/LaunchWeek/7/LW7BgGraphic.tsx | 5 +- .../7/LaunchSection/LaunchWeekLogoHeader.tsx | 4 +- .../LaunchWeek/7/LaunchWeekPrizeCard.tsx | 2 +- .../LaunchWeek/7/LaunchWeekPrizeSection.tsx | 3 +- .../components/LaunchWeek/7/Releases/Day5.tsx | 15 ++-- .../LaunchWeek/7/Releases/index.tsx | 2 +- .../LaunchWeek/8/LaunchWeekPrizeCard.tsx | 2 +- .../LaunchWeek/X/Releases/BuildStage.tsx | 8 +-- .../X/Releases/components/AdventCard.tsx | 8 +-- apps/www/components/MagnifiedProducts.tsx | 18 ++--- apps/www/components/Nav/MobileMenu.tsx | 2 +- apps/www/components/Nav/SolutionsDropdown.tsx | 2 +- apps/www/components/OpenSource/OSSHero.tsx | 2 +- apps/www/components/OpenSource/RepoCard.tsx | 7 +- apps/www/components/OpenSource/Repos.tsx | 2 +- apps/www/components/Panel/Panel.tsx | 2 +- .../Pricing/CostControlAnimation.tsx | 4 +- apps/www/components/Products/Functions/CI.tsx | 2 +- .../Products/Functions/LocalDXImage.tsx | 2 +- .../Products/Functions/NpmEcosystem.tsx | 2 +- .../Products/Functions/ParityImage.tsx | 2 +- .../Products/Functions/QueryLogs.tsx | 2 +- .../Products/Functions/RealtimeLogs.tsx | 2 +- .../Products/VectorAI/CustomersVisual.tsx | 2 +- .../Products/VectorAI/IntegrationsImage.tsx | 10 +-- .../Products/VectorAI/OpenAIImage.tsx | 4 +- .../Products/VectorAI/PGvectorImg.tsx | 2 +- .../Sections/CustomerQuotesSection.tsx | 2 +- .../components/Sections/FeaturesSection.tsx | 2 +- .../components/Sections/HighlightCards.tsx | 2 +- .../Sections/TimedAccordionPanels.tsx | 2 +- .../Sections/TimedAccordionSection.tsx | 2 +- .../components/Sections/TimedTabsSection.tsx | 2 +- .../components/Sections/UseCasesSection.tsx | 2 +- .../components/SurveyResults/SurveyChart.tsx | 2 +- apps/www/components/TabsWithHighlights.tsx | 2 +- apps/www/components/UsersGrowthChart.tsx | 2 +- .../Wrapped/AnimatedGridBackground.tsx | 5 +- apps/www/components/Wrapped/Pages/Home.tsx | 5 +- apps/www/components/Wrapped/Pages/Intro.tsx | 7 +- .../Wrapped/Pages/SupabaseSelect.tsx | 3 +- apps/www/package.json | 2 +- apps/www/pages/assistant.tsx | 2 +- apps/www/pages/customers.tsx | 2 +- apps/www/pages/features.tsx | 2 +- apps/www/pages/state-of-startups-2025.tsx | 2 +- packages/ui-patterns/package.json | 2 +- .../ui-patterns/src/FilterBar/FilterBar.tsx | 2 +- .../syntax-highlighter/framer-features.ts | 2 +- .../syntax-highlighter/transform-renderer.tsx | 2 +- packages/ui/package.json | 2 +- .../AnimatedCounter/AnimatedCounter.tsx | 2 +- packages/ui/src/components/shadcn/ui/form.tsx | 2 +- .../ai-icon-animation/ai-icon-animation.tsx | 2 +- pnpm-lock.yaml | 68 +++++++++++++------ pnpm-workspace.yaml | 1 + 182 files changed, 294 insertions(+), 262 deletions(-) diff --git a/apps/docs/components/DocsCoverLogo.tsx b/apps/docs/components/DocsCoverLogo.tsx index eebc87c0092..8ae457c4d49 100644 --- a/apps/docs/components/DocsCoverLogo.tsx +++ b/apps/docs/components/DocsCoverLogo.tsx @@ -1,6 +1,6 @@ 'use client' -import { domAnimation, LazyMotion, m } from 'framer-motion' +import { domAnimation, LazyMotion, m } from 'motion/react' import React, { type ComponentPropsWithoutRef } from 'react' const DocsCoverLogo = ({ className, ...props }: ComponentPropsWithoutRef<'div'>) => { diff --git a/apps/docs/components/Navigation/NavigationMenu/GlobalMobileMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/GlobalMobileMenu.tsx index 903373a09b3..4ec6d344e26 100644 --- a/apps/docs/components/Navigation/NavigationMenu/GlobalMobileMenu.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/GlobalMobileMenu.tsx @@ -1,7 +1,7 @@ import { getCustomContent } from '~/lib/custom-content/getCustomContent' import { useIsLoggedIn, useIsUserLoading } from 'common' -import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion' import { X } from 'lucide-react' +import { AnimatePresence, domAnimation, LazyMotion, m } from 'motion/react' import Image from 'next/image' import Link from 'next/link' import { usePathname } from 'next/navigation' diff --git a/apps/docs/package.json b/apps/docs/package.json index 2dbce4280e0..b462b63e47a 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -74,7 +74,6 @@ "config": "workspace:*", "dev-tools": "workspace:*", "eslint-config-supabase": "workspace:*", - "framer-motion": "^11.18.2", "github-slugger": "^2.0.0", "graphql": "^16.10.0", "graphql-validation-complexity": "^0.4.2", @@ -99,6 +98,7 @@ "mdast-util-to-string": "^3.1.1", "micromark-extension-gfm": "^2.0.3", "micromark-extension-mdxjs": "^1.0.0", + "motion": "catalog:", "next": "^15.5.24", "next-mdx-remote-client": "^1.1.7", "next-plugin-yaml": "^1.0.1", diff --git a/apps/learn/components/command.tsx b/apps/learn/components/command.tsx index fdc4064c4fa..dd33a367816 100644 --- a/apps/learn/components/command.tsx +++ b/apps/learn/components/command.tsx @@ -1,6 +1,6 @@ 'use client' -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import { Tabs, TabsContent, TabsList, TabsTrigger } from 'ui' import { CommandCopyButton } from './command-copy-button' diff --git a/apps/learn/package.json b/apps/learn/package.json index 4ad5ea1b9ce..393896cc20e 100644 --- a/apps/learn/package.json +++ b/apps/learn/package.json @@ -19,9 +19,9 @@ }, "dependencies": { "common": "workspace:*", - "framer-motion": "^11.18.2", "jotai": "^2.8.0", "lucide-react": "*", + "motion": "catalog:", "next": "catalog:", "next-themes": "catalog:", "react": "catalog:", diff --git a/apps/studio/components/grid/components/footer/operations/SaveQueueActionBar.tsx b/apps/studio/components/grid/components/footer/operations/SaveQueueActionBar.tsx index 5e096526974..355dc3c134d 100644 --- a/apps/studio/components/grid/components/footer/operations/SaveQueueActionBar.tsx +++ b/apps/studio/components/grid/components/footer/operations/SaveQueueActionBar.tsx @@ -1,5 +1,5 @@ -import { AnimatePresence, motion } from 'framer-motion' import { Eye, MoreVertical, Trash } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import { createPortal } from 'react-dom' import { Button, diff --git a/apps/studio/components/grid/components/header/Header.tsx b/apps/studio/components/grid/components/header/Header.tsx index ea341a6c4fa..ea8fc957635 100644 --- a/apps/studio/components/grid/components/header/Header.tsx +++ b/apps/studio/components/grid/components/header/Header.tsx @@ -1,7 +1,7 @@ import { keepPreviousData } from '@tanstack/react-query' import { useBreakpoint, useParams } from 'common' -import { AnimatePresence, motion } from 'framer-motion' import { ChevronDown, Trash } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import { ReactNode, useEffect, useRef, useState } from 'react' import { toast } from 'sonner' import { diff --git a/apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx b/apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx index ad6ed5b11c3..26ee45f7a66 100644 --- a/apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx +++ b/apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx @@ -1,6 +1,6 @@ import { IS_PLATFORM } from 'common' -import { motion } from 'framer-motion' import { MoreVertical } from 'lucide-react' +import { motion } from 'motion/react' import { Button, DropdownMenu, diff --git a/apps/studio/components/interfaces/App/GitHubConfigDriftBanner.tsx b/apps/studio/components/interfaces/App/GitHubConfigDriftBanner.tsx index 88b11d93818..82d716b4748 100644 --- a/apps/studio/components/interfaces/App/GitHubConfigDriftBanner.tsx +++ b/apps/studio/components/interfaces/App/GitHubConfigDriftBanner.tsx @@ -1,5 +1,5 @@ import { useParams } from 'common' -import { AnimatePresence } from 'framer-motion' +import { AnimatePresence } from 'motion/react' import Link from 'next/link' import { HeaderBanner } from '../Organization/HeaderBanner' diff --git a/apps/studio/components/interfaces/AuditLogs/AuditLogsSelectionHeader.tsx b/apps/studio/components/interfaces/AuditLogs/AuditLogsSelectionHeader.tsx index 1a490671513..30db3672ca6 100644 --- a/apps/studio/components/interfaces/AuditLogs/AuditLogsSelectionHeader.tsx +++ b/apps/studio/components/interfaces/AuditLogs/AuditLogsSelectionHeader.tsx @@ -1,6 +1,6 @@ import type { Table } from '@tanstack/react-table' -import { AnimatePresence, motion } from 'framer-motion' import { Copy, X } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import { toast } from 'sonner' import { copyToClipboard } from 'ui' diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/SpamValidation.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/SpamValidation.tsx index 6ba73ea4962..cdf6e10e485 100644 --- a/apps/studio/components/interfaces/Auth/EmailTemplates/SpamValidation.tsx +++ b/apps/studio/components/interfaces/Auth/EmailTemplates/SpamValidation.tsx @@ -1,4 +1,4 @@ -import { AnimatePresence, motion } from 'framer-motion' +import { AnimatePresence, motion } from 'motion/react' import { CardContent, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui' import { Admonition } from 'ui-patterns/Admonition' diff --git a/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.test.tsx b/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.test.tsx index 8c268801283..4353ea49a46 100644 --- a/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.test.tsx +++ b/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.test.tsx @@ -13,7 +13,7 @@ import { import { customRender } from '@/tests/lib/custom-render' import { addAPIMock } from '@/tests/lib/msw' -// FormMessage animates via framer-motion, which relies on the Web Animations API. +// FormMessage animates via Motion, which relies on the Web Animations API. mockAnimationsApi() vi.mock('@/lib/constants', async (importOriginal) => { diff --git a/apps/studio/components/interfaces/BranchManagement/WorkflowLogsCard.tsx b/apps/studio/components/interfaces/BranchManagement/WorkflowLogsCard.tsx index c65e3ed9847..30910105e64 100644 --- a/apps/studio/components/interfaces/BranchManagement/WorkflowLogsCard.tsx +++ b/apps/studio/components/interfaces/BranchManagement/WorkflowLogsCard.tsx @@ -1,5 +1,5 @@ -import { motion } from 'framer-motion' import { CircleDotDashed, GitMerge, X } from 'lucide-react' +import { motion } from 'motion/react' import { useEffect, useRef } from 'react' import { Button, Card, CardContent, CardHeader, CardTitle } from 'ui' diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.test.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.test.tsx index bbfcd09a7c6..461fa0d43b7 100644 --- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.test.tsx +++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.test.tsx @@ -139,7 +139,7 @@ vi.mock('common', async (importOriginal) => { return { ...actual, useParams: () => ({ ref: 'project-ref' }) } }) -vi.mock('framer-motion', () => ({ +vi.mock('motion/react', () => ({ AnimatePresence: ({ children }: PropsWithChildren) => children, motion: { div: ({ children }: PropsWithChildren) =>
{children}
}, })) diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx index 88d57dedf69..3714612ae6e 100644 --- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx +++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx @@ -1,8 +1,8 @@ import { zodResolver } from '@hookform/resolvers/zod' import { PermissionAction } from '@supabase/shared-types/out/constants' import { useParams } from 'common' -import { AnimatePresence, motion } from 'framer-motion' import { Loader2 } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import { RefObject, useEffect, useMemo, useRef, useState, type ReactNode } from 'react' import { useForm, useWatch } from 'react-hook-form' import { toast } from 'sonner' diff --git a/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx b/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx index f45cc9c68a4..ac680505521 100644 --- a/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx +++ b/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx @@ -1,7 +1,7 @@ import { zodResolver } from '@hookform/resolvers/zod' import { PermissionAction } from '@supabase/shared-types/out/constants' import { useParams } from 'common' -import { AnimatePresence, motion } from 'framer-motion' +import { AnimatePresence, motion } from 'motion/react' import { useEffect, useRef, useState, type ReactNode } from 'react' import { useForm, useWatch } from 'react-hook-form' import { CloudProvider } from 'shared-data' diff --git a/apps/studio/components/interfaces/DiskManagement/DiskManagementRestartRequiredSection.tsx b/apps/studio/components/interfaces/DiskManagement/DiskManagementRestartRequiredSection.tsx index 92955865826..b349d2adad9 100644 --- a/apps/studio/components/interfaces/DiskManagement/DiskManagementRestartRequiredSection.tsx +++ b/apps/studio/components/interfaces/DiskManagement/DiskManagementRestartRequiredSection.tsx @@ -1,5 +1,5 @@ -import { AnimatePresence, motion } from 'framer-motion' import { RotateCcw } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import { DialogSection, WarningIcon } from 'ui' interface DiskMangementRestartRequiredSectionProps { diff --git a/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx index fe0548e246c..274ccc460f3 100644 --- a/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx +++ b/apps/studio/components/interfaces/DiskManagement/fields/ThroughputField.tsx @@ -1,5 +1,5 @@ import { useParams } from 'common' -import { AnimatePresence, motion } from 'framer-motion' +import { AnimatePresence, motion } from 'motion/react' import { useEffect } from 'react' import { UseFormReturn, useWatch } from 'react-hook-form' import { diff --git a/apps/studio/components/interfaces/DiskManagement/ui/BillingChangeBadge.tsx b/apps/studio/components/interfaces/DiskManagement/ui/BillingChangeBadge.tsx index 61b1e5bc135..c4e4b004d97 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/BillingChangeBadge.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/BillingChangeBadge.tsx @@ -1,5 +1,5 @@ -import { AnimatePresence, motion } from 'framer-motion' import { ChevronRight } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import { Badge, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui' import { formatCurrency } from '@/lib/helpers' diff --git a/apps/studio/components/interfaces/DiskManagement/ui/ComputeSizeRecommendationSection.tsx b/apps/studio/components/interfaces/DiskManagement/ui/ComputeSizeRecommendationSection.tsx index 302830f12a3..aa4a7a79e5d 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/ComputeSizeRecommendationSection.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/ComputeSizeRecommendationSection.tsx @@ -1,4 +1,4 @@ -import { AnimatePresence, motion } from 'framer-motion' +import { AnimatePresence, motion } from 'motion/react' import { ReactNode } from 'react' import { UseFormReturn, useWatch } from 'react-hook-form' import { COMPUTE_BASELINE_IOPS, COMPUTE_MAX_IOPS } from 'shared-data' diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskCountdownRadial.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskCountdownRadial.tsx index 053b28352e9..4fded1fac11 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/DiskCountdownRadial.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/DiskCountdownRadial.tsx @@ -1,5 +1,5 @@ import { useParams } from 'common' -import { AnimatePresence, motion } from 'framer-motion' +import { AnimatePresence, motion } from 'motion/react' import { useEffect, useState } from 'react' import { Card, CardContent } from 'ui' diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskManagementReadReplicas.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskManagementReadReplicas.tsx index dcd2ae660e1..d504f6e8f14 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/DiskManagementReadReplicas.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/DiskManagementReadReplicas.tsx @@ -1,5 +1,5 @@ import { useParams } from 'common' -import { AnimatePresence, motion } from 'framer-motion' +import { AnimatePresence, motion } from 'motion/react' import { Alert, AlertDescription, AlertTitle, InfoIcon } from 'ui' import { BillingChangeBadge } from './BillingChangeBadge' diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx index 8f5950d4d25..7d4dc6cecea 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/DiskSpaceBar.tsx @@ -1,7 +1,7 @@ import MotionNumber from '@number-flow/react' import { useParams } from 'common' -import { AnimatePresence, motion } from 'framer-motion' import { Info } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import { useTheme } from 'next-themes' import { useMemo } from 'react' import { UseFormReturn, useWatch } from 'react-hook-form' diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeRecommendationSection.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeRecommendationSection.tsx index ab237f10b8e..687c1cc854d 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeRecommendationSection.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/DiskTypeRecommendationSection.tsx @@ -1,4 +1,4 @@ -import { AnimatePresence, motion } from 'framer-motion' +import { AnimatePresence, motion } from 'motion/react' import { ReactNode } from 'react' import { UseFormReturn, useWatch } from 'react-hook-form' import { Admonition } from 'ui-patterns/Admonition' diff --git a/apps/studio/components/interfaces/DiskManagement/ui/FormMessage.tsx b/apps/studio/components/interfaces/DiskManagement/ui/FormMessage.tsx index 81cb935bfbd..5f85dcdf746 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/FormMessage.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/FormMessage.tsx @@ -1,4 +1,4 @@ -import { AnimatePresence, motion } from 'framer-motion' +import { AnimatePresence, motion } from 'motion/react' import { Admonition } from 'ui-patterns/Admonition' interface FormMessageProps { diff --git a/apps/studio/components/interfaces/DiskManagement/ui/NoticeBar.tsx b/apps/studio/components/interfaces/DiskManagement/ui/NoticeBar.tsx index 0ce27960ff8..95c2cec6f2b 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/NoticeBar.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/NoticeBar.tsx @@ -1,4 +1,4 @@ -import { AnimatePresence, motion } from 'framer-motion' +import { AnimatePresence, motion } from 'motion/react' import { cn } from 'ui' import { Admonition } from 'ui-patterns/Admonition' import { type AdmonitionProps } from 'ui-patterns/Admonition/Admonition.types' diff --git a/apps/studio/components/interfaces/DiskManagement/ui/SpendCapDisabledSection.tsx b/apps/studio/components/interfaces/DiskManagement/ui/SpendCapDisabledSection.tsx index 867315fea75..cacfa03ca8a 100644 --- a/apps/studio/components/interfaces/DiskManagement/ui/SpendCapDisabledSection.tsx +++ b/apps/studio/components/interfaces/DiskManagement/ui/SpendCapDisabledSection.tsx @@ -1,4 +1,4 @@ -import { AnimatePresence, motion } from 'framer-motion' +import { AnimatePresence, motion } from 'motion/react' import Link from 'next/link' import { AlertDescription, AlertTitle, buttonVariants, cn } from 'ui' import { Admonition } from 'ui-patterns/Admonition' diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx index 2d9d4dea79a..3e4e79cfc40 100644 --- a/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx +++ b/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CronJobScheduleSection.tsx @@ -1,4 +1,4 @@ -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import { useEffect, useState } from 'react' import { UseFormReturn, useWatch } from 'react-hook-form' import { diff --git a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTab.test.tsx b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTab.test.tsx index 426e516a4d8..25a2a547042 100644 --- a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTab.test.tsx +++ b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTab.test.tsx @@ -18,7 +18,7 @@ vi.mock('../Landing/Integrations.constants', () => ({ ], })) -vi.mock('framer-motion', async (importOriginal) => { +vi.mock('motion/react', async (importOriginal) => { const actual = (await importOriginal()) as any return { ...actual, diff --git a/apps/studio/components/interfaces/Integrations/Integration/MarkdownContent.tsx b/apps/studio/components/interfaces/Integrations/Integration/MarkdownContent.tsx index 105b7ac30e4..2095c3f07fd 100644 --- a/apps/studio/components/interfaces/Integrations/Integration/MarkdownContent.tsx +++ b/apps/studio/components/interfaces/Integrations/Integration/MarkdownContent.tsx @@ -1,4 +1,4 @@ -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import { useEffect, useState } from 'react' import { cn } from 'ui' diff --git a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx index 0a9d4f65061..1f31885a926 100644 --- a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx +++ b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx @@ -1,7 +1,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' import { IS_PLATFORM, useFlag, useParams } from 'common' -import { AnimatePresence } from 'framer-motion' import { AlertCircle, RotateCw, Timer } from 'lucide-react' +import { AnimatePresence } from 'motion/react' import { useMemo, useRef, useState } from 'react' import { toast } from 'sonner' import { diff --git a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/signing-key-row.tsx b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/signing-key-row.tsx index f962d84bfa6..4c08161246d 100644 --- a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/signing-key-row.tsx +++ b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/signing-key-row.tsx @@ -1,6 +1,5 @@ import { components } from 'api-types' import dayjs from 'dayjs' -import { motion } from 'framer-motion' import { CircleArrowDown, CircleArrowUp, @@ -12,6 +11,7 @@ import { Timer, Trash2, } from 'lucide-react' +import { motion } from 'motion/react' import { Badge, Button, diff --git a/apps/studio/components/interfaces/LogDrains/AnimatedLogos.tsx b/apps/studio/components/interfaces/LogDrains/AnimatedLogos.tsx index e12e7734fbe..bd702294714 100644 --- a/apps/studio/components/interfaces/LogDrains/AnimatedLogos.tsx +++ b/apps/studio/components/interfaces/LogDrains/AnimatedLogos.tsx @@ -1,6 +1,6 @@ -import { AnimatePresence, motion } from 'framer-motion' import { Axiom, Datadog, Grafana, Last9, Otlp, Sentry } from 'icons' import { BracesIcon, Cloud, Server } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import { useEffect, useState } from 'react' import { cn } from 'ui' diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/EnterpriseCard.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/EnterpriseCard.tsx index 8193eba8a86..a97f34d8aac 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/EnterpriseCard.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/EnterpriseCard.tsx @@ -1,5 +1,5 @@ -import { motion, type Variants } from 'framer-motion' import { Check } from 'lucide-react' +import { motion, type Variants } from 'motion/react' import { PricingInformation } from 'shared-data' import { Button, cn } from 'ui' diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx index f10474ccab3..045f1f77ce3 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx @@ -1,6 +1,6 @@ -import { motion, type Variants } from 'framer-motion' import { isArray } from 'lodash' import { Check } from 'lucide-react' +import { motion, type Variants } from 'motion/react' import type { PricingInformation } from 'shared-data' import { Button, cn } from 'ui' import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.tsx index bc97fa672d5..7dcbffb6fb3 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.tsx @@ -1,4 +1,4 @@ -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import { useRouter } from 'next/router' import { plans as subscriptionsPlans } from 'shared-data/plans' diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.utils.ts b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.utils.ts index cc1d4e294a8..bb6c751ccd3 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.utils.ts +++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.utils.ts @@ -1,4 +1,4 @@ -import type { Variants } from 'framer-motion' +import type { Variants } from 'motion/react' const CARD_VARIANTS: Variants = { hidden: { opacity: 0, y: 8 }, diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdatePanelShell.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdatePanelShell.tsx index 329269f2bd3..142f1089bfb 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdatePanelShell.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdatePanelShell.tsx @@ -1,5 +1,5 @@ -import { motion } from 'framer-motion' import { ArrowLeft, ExternalLink } from 'lucide-react' +import { motion } from 'motion/react' import type { ReactNode } from 'react' import { Button } from 'ui' diff --git a/apps/studio/components/interfaces/Organization/HeaderBanner.tsx b/apps/studio/components/interfaces/Organization/HeaderBanner.tsx index 9e8b25208ab..332c837239d 100644 --- a/apps/studio/components/interfaces/Organization/HeaderBanner.tsx +++ b/apps/studio/components/interfaces/Organization/HeaderBanner.tsx @@ -1,5 +1,5 @@ -import { AnimatePresence, motion } from 'framer-motion' import { XIcon } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import type { ReactNode } from 'react' import { Button, cn, CriticalIcon, WarningIcon } from 'ui' diff --git a/apps/studio/components/interfaces/Realtime/Inspector/AnimatedCursors.tsx b/apps/studio/components/interfaces/Realtime/Inspector/AnimatedCursors.tsx index 29afd32fecf..5bc69ac4b59 100644 --- a/apps/studio/components/interfaces/Realtime/Inspector/AnimatedCursors.tsx +++ b/apps/studio/components/interfaces/Realtime/Inspector/AnimatedCursors.tsx @@ -1,5 +1,5 @@ -import { motion } from 'framer-motion' import { MousePointer2 } from 'lucide-react' +import { motion } from 'motion/react' import { useEffect, useState } from 'react' export const AnimatedCursors = () => { diff --git a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx index 932d2ca5fe6..249b8c8b448 100644 --- a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx +++ b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx @@ -1,7 +1,7 @@ import { zodResolver } from '@hookform/resolvers/zod' import { PermissionAction } from '@supabase/shared-types/out/constants' -import { AnimatePresence, motion } from 'framer-motion' import { Loader2 } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import { useState } from 'react' import { useForm, useWatch } from 'react-hook-form' import { toast } from 'sonner' diff --git a/apps/studio/components/interfaces/Sidebar.tsx b/apps/studio/components/interfaces/Sidebar.tsx index ec7b8db062b..b64a41b823e 100644 --- a/apps/studio/components/interfaces/Sidebar.tsx +++ b/apps/studio/components/interfaces/Sidebar.tsx @@ -1,8 +1,8 @@ import { LOCAL_STORAGE_KEYS, useFlag, useIsMFAEnabled, useParams } from 'common' -import { AnimatePresence, motion, MotionProps } from 'framer-motion' import { Home } from 'icons' import { isUndefined } from 'lodash' import { Blocks, Boxes, ChartArea, PanelLeftDashed, Receipt, Settings, Users } from 'lucide-react' +import { AnimatePresence, motion, MotionProps } from 'motion/react' import Link from 'next/link' import { useRouter } from 'next/router' import { ComponentProps, ComponentPropsWithoutRef, FC, ReactNode, useEffect } from 'react' diff --git a/apps/studio/components/interfaces/SignIn/SignUpForm.tsx b/apps/studio/components/interfaces/SignIn/SignUpForm.tsx index 9b9ae4cfcb7..8dda979e629 100644 --- a/apps/studio/components/interfaces/SignIn/SignUpForm.tsx +++ b/apps/studio/components/interfaces/SignIn/SignUpForm.tsx @@ -1,7 +1,7 @@ import HCaptcha from '@hcaptcha/react-hcaptcha' import { zodResolver } from '@hookform/resolvers/zod' -import { motion } from 'framer-motion' import { Eye, EyeOff } from 'lucide-react' +import { motion } from 'motion/react' import { useRouter } from 'next/router' import { parseAsString, useQueryStates } from 'nuqs' import { useRef, useState } from 'react' diff --git a/apps/studio/components/interfaces/Storage/BucketFilePickerDialog/BucketFilePickerColumn.tsx b/apps/studio/components/interfaces/Storage/BucketFilePickerDialog/BucketFilePickerColumn.tsx index 632268ac572..9b0f7e770f8 100644 --- a/apps/studio/components/interfaces/Storage/BucketFilePickerDialog/BucketFilePickerColumn.tsx +++ b/apps/studio/components/interfaces/Storage/BucketFilePickerDialog/BucketFilePickerColumn.tsx @@ -2,9 +2,9 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query' import { useDebounce } from '@uidotdev/usehooks' import { useParams } from 'common' -import { AnimatePresence, motion } from 'framer-motion' import { compact, get, sum, uniqBy } from 'lodash' import { Upload } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import { DragEventHandler, useCallback, useMemo, useRef, useState } from 'react' import { toast } from 'sonner' import { Checkbox, cn } from 'ui' diff --git a/apps/studio/components/interfaces/Storage/FilesBuckets/BucketVersioningFields/BucketVersioningFields.tsx b/apps/studio/components/interfaces/Storage/FilesBuckets/BucketVersioningFields/BucketVersioningFields.tsx index 544ce50c1a1..97f715ca14b 100644 --- a/apps/studio/components/interfaces/Storage/FilesBuckets/BucketVersioningFields/BucketVersioningFields.tsx +++ b/apps/studio/components/interfaces/Storage/FilesBuckets/BucketVersioningFields/BucketVersioningFields.tsx @@ -1,4 +1,4 @@ -import { AnimatePresence } from 'framer-motion' +import { AnimatePresence } from 'motion/react' import { useWatch, type UseFormReturn } from 'react-hook-form' import { Badge, DialogSection, DialogSectionSeparator, FormControl, FormField, Switch } from 'ui' import { Admonition } from 'ui-patterns/Admonition' diff --git a/apps/studio/components/interfaces/Storage/FilesBuckets/BucketVersioningFields/LifecyclePolicySection.tsx b/apps/studio/components/interfaces/Storage/FilesBuckets/BucketVersioningFields/LifecyclePolicySection.tsx index b83642aa73f..ebf38c9b389 100644 --- a/apps/studio/components/interfaces/Storage/FilesBuckets/BucketVersioningFields/LifecyclePolicySection.tsx +++ b/apps/studio/components/interfaces/Storage/FilesBuckets/BucketVersioningFields/LifecyclePolicySection.tsx @@ -1,5 +1,5 @@ import { useParams } from 'common' -import { AnimatePresence } from 'framer-motion' +import { AnimatePresence } from 'motion/react' import { useEffect, useRef } from 'react' import type { UseFormReturn } from 'react-hook-form' import { diff --git a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerColumn.tsx b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerColumn.tsx index a023d1a0088..ebbe8262e91 100644 --- a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerColumn.tsx +++ b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerColumn.tsx @@ -1,7 +1,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' -import { AnimatePresence, motion } from 'framer-motion' import { get, noop, sum, uniqBy } from 'lodash' import { ChevronsDown, ChevronsUp, Copy, Eye, FolderPlus, Upload } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { toast } from 'sonner' import { diff --git a/apps/studio/components/interfaces/Support/AIAssistantOption.tsx b/apps/studio/components/interfaces/Support/AIAssistantOption.tsx index 1357c2268fd..1e7df2683f5 100644 --- a/apps/studio/components/interfaces/Support/AIAssistantOption.tsx +++ b/apps/studio/components/interfaces/Support/AIAssistantOption.tsx @@ -1,5 +1,5 @@ -import { AnimatePresence, motion } from 'framer-motion' import { MessageSquare } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import Link from 'next/link' import { useCallback, useEffect, useState } from 'react' import { AiIconAnimation, Button } from 'ui' diff --git a/apps/studio/components/interfaces/Support/DiscordCTACard.tsx b/apps/studio/components/interfaces/Support/DiscordCTACard.tsx index bc9d1a6167f..6beb6ffecb1 100644 --- a/apps/studio/components/interfaces/Support/DiscordCTACard.tsx +++ b/apps/studio/components/interfaces/Support/DiscordCTACard.tsx @@ -1,4 +1,4 @@ -import { AnimatePresence, motion } from 'framer-motion' +import { AnimatePresence, motion } from 'motion/react' import Link from 'next/link' import router from 'next/router' import { useEffect, useState } from 'react' diff --git a/apps/studio/components/interfaces/Support/IncidentAdmonition.tsx b/apps/studio/components/interfaces/Support/IncidentAdmonition.tsx index 52ab0dee0f6..cae79d7d889 100644 --- a/apps/studio/components/interfaces/Support/IncidentAdmonition.tsx +++ b/apps/studio/components/interfaces/Support/IncidentAdmonition.tsx @@ -1,5 +1,5 @@ -import { AnimatePresence, motion } from 'framer-motion' import { ExternalLink } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import Link from 'next/link' import { Button } from 'ui' import { Admonition } from 'ui-patterns/Admonition' diff --git a/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx b/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx index f38379ae4f1..016686c0572 100644 --- a/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx +++ b/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx @@ -1,8 +1,8 @@ // End of third-party imports import { useParams } from 'common' -import { AnimatePresence, motion } from 'framer-motion' import { Check, ChevronsUpDown, ExternalLink } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import Link from 'next/link' import type { UseFormReturn } from 'react-hook-form' import { toast } from 'sonner' diff --git a/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.constants.tsx b/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.constants.tsx index bfac9c16336..aa7947cb73f 100644 --- a/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.constants.tsx +++ b/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.constants.tsx @@ -1,5 +1,5 @@ -import { motion } from 'framer-motion' import { MessageSquare, NotebookText } from 'lucide-react' +import { motion } from 'motion/react' import { type ComponentType, type PropsWithChildren } from 'react' import { cn } from 'ui' import { InnerSideBarFilters, InnerSideBarFilterSearchInput } from 'ui-patterns/InnerSideMenu' diff --git a/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.tsx b/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.tsx index 970c86cc7b1..4270f9a652f 100644 --- a/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.tsx +++ b/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.tsx @@ -1,5 +1,5 @@ -import { AnimatePresence, motion } from 'framer-motion' import { Home, MessageCirclePlus, NotebookText, Plus, SquareCode } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import { ComponentProps, ReactNode, useEffect, useEffectEvent, useState } from 'react' import { cn, diff --git a/apps/studio/components/layouts/ExplorerLayout/ExplorerNavHome.tsx b/apps/studio/components/layouts/ExplorerLayout/ExplorerNavHome.tsx index 3e42cbcda54..1bc68aa29ce 100644 --- a/apps/studio/components/layouts/ExplorerLayout/ExplorerNavHome.tsx +++ b/apps/studio/components/layouts/ExplorerLayout/ExplorerNavHome.tsx @@ -1,6 +1,6 @@ import { useParams } from 'common' -import { motion } from 'framer-motion' import { ChevronRight, Plus, SquareCode } from 'lucide-react' +import { motion } from 'motion/react' import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader' import { diff --git a/apps/studio/components/layouts/InterstitialLayout.tsx b/apps/studio/components/layouts/InterstitialLayout.tsx index a2b54fbc78b..b3eab9435b9 100644 --- a/apps/studio/components/layouts/InterstitialLayout.tsx +++ b/apps/studio/components/layouts/InterstitialLayout.tsx @@ -1,5 +1,5 @@ -import { motion, useReducedMotion } from 'framer-motion' import { ArrowRightLeft } from 'lucide-react' +import { motion, useReducedMotion } from 'motion/react' import type { PropsWithChildren, ReactNode } from 'react' import { Card, CardContent, CardHeader, cn } from 'ui' diff --git a/apps/studio/components/layouts/Navigation/FloatingMobileToolbar/FloatingMobileToolbar.tsx b/apps/studio/components/layouts/Navigation/FloatingMobileToolbar/FloatingMobileToolbar.tsx index da5b728cf82..2646a52a052 100644 --- a/apps/studio/components/layouts/Navigation/FloatingMobileToolbar/FloatingMobileToolbar.tsx +++ b/apps/studio/components/layouts/Navigation/FloatingMobileToolbar/FloatingMobileToolbar.tsx @@ -1,6 +1,6 @@ import { useParams, useViewport } from 'common' -import { AnimatePresence } from 'framer-motion' import { Menu, Search, X } from 'lucide-react' +import { AnimatePresence } from 'motion/react' import { useRef } from 'react' import { Button, cn, KeyboardShortcut } from 'ui' diff --git a/apps/studio/components/layouts/Navigation/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx b/apps/studio/components/layouts/Navigation/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx index 2b423b72b5b..be7363171f1 100644 --- a/apps/studio/components/layouts/Navigation/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx +++ b/apps/studio/components/layouts/Navigation/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx @@ -1,8 +1,8 @@ import { useDebounce } from '@uidotdev/usehooks' import { LOCAL_STORAGE_KEYS, useParams } from 'common' -import { AnimatePresence, motion } from 'framer-motion' import { toPng } from 'html-to-image' import { Camera, CircleCheck, Image as ImageIcon, Upload, X } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import { useRouter } from 'next/router' import { ChangeEvent, useEffect, useRef, useState } from 'react' import { toast } from 'sonner' diff --git a/apps/studio/components/layouts/Navigation/LayoutHeader/LayoutHeader.tsx b/apps/studio/components/layouts/Navigation/LayoutHeader/LayoutHeader.tsx index 6668e5a79b9..0aede59b03d 100644 --- a/apps/studio/components/layouts/Navigation/LayoutHeader/LayoutHeader.tsx +++ b/apps/studio/components/layouts/Navigation/LayoutHeader/LayoutHeader.tsx @@ -1,7 +1,7 @@ import { useParams } from 'common' import dayjs from 'dayjs' -import { AnimatePresence, motion } from 'framer-motion' import { ChevronLeft } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import Link from 'next/link' import { useRouter } from 'next/router' import { ReactNode, useMemo } from 'react' diff --git a/apps/studio/components/layouts/ProjectLayout/index.test.tsx b/apps/studio/components/layouts/ProjectLayout/index.test.tsx index f2603a560d3..b2606bd21e0 100644 --- a/apps/studio/components/layouts/ProjectLayout/index.test.tsx +++ b/apps/studio/components/layouts/ProjectLayout/index.test.tsx @@ -88,7 +88,7 @@ vi.mock('common', () => ({ useFlag: () => false, })) -vi.mock('framer-motion', () => ({ +vi.mock('motion/react', () => ({ AnimatePresence: ({ children }: { children: ReactNode }) => <>{children}, motion: { div: ({ children, ...props }: any) =>
{children}
, diff --git a/apps/studio/components/layouts/ProjectLayout/index.tsx b/apps/studio/components/layouts/ProjectLayout/index.tsx index 2a432a54e51..53317d665e0 100644 --- a/apps/studio/components/layouts/ProjectLayout/index.tsx +++ b/apps/studio/components/layouts/ProjectLayout/index.tsx @@ -1,6 +1,6 @@ import { LOCAL_STORAGE_KEYS, mergeRefs, useFlag, useParams } from 'common' -import { AnimatePresence, motion } from 'framer-motion' import { XIcon } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import Head from 'next/head' import { useRouter } from 'next/router' import { diff --git a/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.tsx b/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.tsx index b3b96dc883b..97c3512d029 100644 --- a/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.tsx +++ b/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.tsx @@ -1,5 +1,5 @@ import { LOCAL_STORAGE_KEYS, useFlag, useParams } from 'common' -import { AnimatePresence, motion } from 'framer-motion' +import { AnimatePresence, motion } from 'motion/react' import { useRouter } from 'next/router' import { PropsWithChildren, useMemo } from 'react' diff --git a/apps/studio/components/layouts/Tabs/RecentItems.tsx b/apps/studio/components/layouts/Tabs/RecentItems.tsx index f2649b32f3b..6d86cb15509 100644 --- a/apps/studio/components/layouts/Tabs/RecentItems.tsx +++ b/apps/studio/components/layouts/Tabs/RecentItems.tsx @@ -1,6 +1,6 @@ import { useParams } from 'common' import dayjs from 'dayjs' -import { AnimatePresence, motion } from 'framer-motion' +import { AnimatePresence, motion } from 'motion/react' import Link from 'next/link' import { useEditorType } from '../editors/EditorsLayout.hooks' diff --git a/apps/studio/components/layouts/Tabs/SortableTab.tsx b/apps/studio/components/layouts/Tabs/SortableTab.tsx index 9d437c76491..af604094d36 100644 --- a/apps/studio/components/layouts/Tabs/SortableTab.tsx +++ b/apps/studio/components/layouts/Tabs/SortableTab.tsx @@ -1,7 +1,7 @@ import { useSortable } from '@dnd-kit/sortable' import { CSS } from '@dnd-kit/utilities' -import { AnimatePresence, motion } from 'framer-motion' import { X } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import { useMemo, type KeyboardEvent } from 'react' import { cn, TabsTrigger } from 'ui' diff --git a/apps/studio/components/layouts/Tabs/TabPreview.tsx b/apps/studio/components/layouts/Tabs/TabPreview.tsx index ef5825f49ba..373f07cefce 100644 --- a/apps/studio/components/layouts/Tabs/TabPreview.tsx +++ b/apps/studio/components/layouts/Tabs/TabPreview.tsx @@ -1,4 +1,4 @@ -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import { EntityTypeIcon } from '@/components/ui/EntityTypeIcon' import { useTabsStateSnapshot } from '@/state/tabs' diff --git a/apps/studio/components/layouts/Tabs/Tabs.tsx b/apps/studio/components/layouts/Tabs/Tabs.tsx index 36839849c4c..830b64d2683 100644 --- a/apps/studio/components/layouts/Tabs/Tabs.tsx +++ b/apps/studio/components/layouts/Tabs/Tabs.tsx @@ -8,8 +8,8 @@ import { } from '@dnd-kit/core' import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable' import { useParams } from 'common' -import { AnimatePresence, motion } from 'framer-motion' import { Plus, X } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import { useRouter } from 'next/router' import { ReactNode, useState } from 'react' import { diff --git a/apps/studio/components/ui/AIAssistantPanel/AssistantChat.tsx b/apps/studio/components/ui/AIAssistantPanel/AssistantChat.tsx index e00a3da892c..7c396f12c5d 100644 --- a/apps/studio/components/ui/AIAssistantPanel/AssistantChat.tsx +++ b/apps/studio/components/ui/AIAssistantPanel/AssistantChat.tsx @@ -3,8 +3,8 @@ import { useChat } from '@ai-sdk/react' import { lastAssistantMessageIsCompleteWithApprovalResponses } from 'ai' import { LOCAL_STORAGE_KEYS, useFlag } from 'common' import { useParams, useSearchParamsShallow } from 'common/hooks' -import { AnimatePresence, motion, useReducedMotion } from 'framer-motion' import { Eraser, Pencil, X } from 'lucide-react' +import { AnimatePresence, motion, useReducedMotion } from 'motion/react' import { Fragment, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react' import { Button, cn, KeyboardShortcut } from 'ui' import { Admonition } from 'ui-patterns/Admonition' diff --git a/apps/studio/components/ui/AIAssistantPanel/AssistantChatForm.tsx b/apps/studio/components/ui/AIAssistantPanel/AssistantChatForm.tsx index 0c3a2d1600b..b0991cbab34 100644 --- a/apps/studio/components/ui/AIAssistantPanel/AssistantChatForm.tsx +++ b/apps/studio/components/ui/AIAssistantPanel/AssistantChatForm.tsx @@ -1,6 +1,6 @@ import { useBreakpoint } from 'common' -import { AnimatePresence, motion } from 'framer-motion' import { ArrowUp, Loader2, Square } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import { ChangeEvent, FormEvent, forwardRef, KeyboardEvent, memo, ReactNode, useRef } from 'react' import { Button, cn, ExpandingTextArea } from 'ui' @@ -56,7 +56,7 @@ export interface FormProps { submitLabel?: string /** * An additional action shown beside the main submit button, transitioned in/out with - * framer-motion. Pass undefined to hide it (e.g. when the input doesn't match its condition). + * Motion. Pass undefined to hide it (e.g. when the input doesn't match its condition). */ secondaryAction?: { label: string diff --git a/apps/studio/components/ui/AIEditor/index.tsx b/apps/studio/components/ui/AIEditor/index.tsx index b9b8cb8ec23..81dad4f113e 100644 --- a/apps/studio/components/ui/AIEditor/index.tsx +++ b/apps/studio/components/ui/AIEditor/index.tsx @@ -1,6 +1,6 @@ import { Monaco, OnMount } from '@monaco-editor/react' -import { AnimatePresence, motion } from 'framer-motion' import type { editor as monacoEditor } from 'monaco-editor' +import { AnimatePresence, motion } from 'motion/react' import { useCallback, useEffect, useRef, useState } from 'react' import { toast } from 'sonner' import { KeyboardShortcut } from 'ui' diff --git a/apps/studio/components/ui/BannerStack/BannerStack.tsx b/apps/studio/components/ui/BannerStack/BannerStack.tsx index 28420784fe6..9ff52a91ed5 100644 --- a/apps/studio/components/ui/BannerStack/BannerStack.tsx +++ b/apps/studio/components/ui/BannerStack/BannerStack.tsx @@ -1,4 +1,4 @@ -import { AnimatePresence, motion, useReducedMotion } from 'framer-motion' +import { AnimatePresence, motion, useReducedMotion } from 'motion/react' import { useState } from 'react' import { useBannerStack } from './BannerStackProvider' diff --git a/apps/studio/components/ui/BannerStack/Banners/BannerExplorer.tsx b/apps/studio/components/ui/BannerStack/Banners/BannerExplorer.tsx index 212efb9b3bc..13b17cbd6df 100644 --- a/apps/studio/components/ui/BannerStack/Banners/BannerExplorer.tsx +++ b/apps/studio/components/ui/BannerStack/Banners/BannerExplorer.tsx @@ -1,5 +1,5 @@ import { LOCAL_STORAGE_KEYS } from 'common' -import { AnimatePresence, motion } from 'framer-motion' +import { AnimatePresence, motion } from 'motion/react' import { useEffect } from 'react' import { Badge, Button } from 'ui' diff --git a/apps/studio/components/ui/FeatureBanner.tsx b/apps/studio/components/ui/FeatureBanner.tsx index b6f0550b82d..7e37e670b99 100644 --- a/apps/studio/components/ui/FeatureBanner.tsx +++ b/apps/studio/components/ui/FeatureBanner.tsx @@ -1,6 +1,6 @@ import { useParams } from 'common/hooks' -import { HTMLMotionProps, motion } from 'framer-motion' import { X } from 'lucide-react' +import { HTMLMotionProps, motion } from 'motion/react' import { ReactNode } from 'react' import { Button, cn } from 'ui' diff --git a/apps/studio/components/ui/FileExplorerAndEditor/index.tsx b/apps/studio/components/ui/FileExplorerAndEditor/index.tsx index c9a5cbebd1c..baeff77050b 100644 --- a/apps/studio/components/ui/FileExplorerAndEditor/index.tsx +++ b/apps/studio/components/ui/FileExplorerAndEditor/index.tsx @@ -1,6 +1,6 @@ import { IS_PLATFORM } from 'common' -import { AnimatePresence, motion } from 'framer-motion' import { Plus } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import { useCallback, useEffect, useState } from 'react' import { toast } from 'sonner' import { Button, cn, flattenTree, INodeRendererProps, TreeView } from 'ui' diff --git a/apps/studio/components/ui/FormSectionCollapse.tsx b/apps/studio/components/ui/FormSectionCollapse.tsx index 9bf0a6818cc..8897c591545 100644 --- a/apps/studio/components/ui/FormSectionCollapse.tsx +++ b/apps/studio/components/ui/FormSectionCollapse.tsx @@ -1,4 +1,4 @@ -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import type { ReactNode } from 'react' /** Wrap the parent in `` to avoid animating on first paint. */ diff --git a/apps/studio/package.json b/apps/studio/package.json index 0ef65f11522..a5bb605aec5 100644 --- a/apps/studio/package.json +++ b/apps/studio/package.json @@ -112,7 +112,6 @@ "dev-tools": "workspace:*", "effect": "4.0.0-rc.112", "file-saver": "^2.0.5", - "framer-motion": "^11.18.2", "fuse.js": "^7.4.0", "generate-password-browser": "^1.1.0", "gqlmin": "^0.3.1", @@ -131,6 +130,7 @@ "markdown-table": "^3.0.3", "mime-db": "^1.53.0", "monaco-editor": "catalog:", + "motion": "catalog:", "next": "catalog:", "next-themes": "catalog:", "nuqs": "2.7.1", diff --git a/apps/ui-library/components/command.tsx b/apps/ui-library/components/command.tsx index 53f3cedda0f..bcff7921870 100644 --- a/apps/ui-library/components/command.tsx +++ b/apps/ui-library/components/command.tsx @@ -1,6 +1,6 @@ 'use client' -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import { Tabs, TabsContent, TabsList, TabsTrigger } from 'ui' import { CommandCopyButton } from './command-copy-button' diff --git a/apps/ui-library/package.json b/apps/ui-library/package.json index 92bce342e9a..9cd476c5932 100644 --- a/apps/ui-library/package.json +++ b/apps/ui-library/package.json @@ -37,11 +37,11 @@ "common": "workspace:*", "common-tags": "^1.8.2", "eslint-config-supabase": "workspace:*", - "framer-motion": "^11.18.2", "icons": "workspace:*", "jotai": "^2.8.0", "lucide-react": "*", "monaco-editor": "catalog:", + "motion": "catalog:", "next": "catalog:", "next-themes": "catalog:", "openai": "^5.9.0", diff --git a/apps/www/app/(home)/_components/CommunitySectionV2.tsx b/apps/www/app/(home)/_components/CommunitySectionV2.tsx index 8f86731d8e7..59630241557 100644 --- a/apps/www/app/(home)/_components/CommunitySectionV2.tsx +++ b/apps/www/app/(home)/_components/CommunitySectionV2.tsx @@ -1,6 +1,6 @@ 'use client' -import { AnimatePresence, motion } from 'framer-motion' +import { AnimatePresence, motion } from 'motion/react' import Link from 'next/link' import { useEffect, useState } from 'react' import { topTweets } from 'shared-data/tweets' diff --git a/apps/www/app/(home)/_components/CustomerStoriesSection.tsx b/apps/www/app/(home)/_components/CustomerStoriesSection.tsx index a06c3b8eb21..807be7f322d 100644 --- a/apps/www/app/(home)/_components/CustomerStoriesSection.tsx +++ b/apps/www/app/(home)/_components/CustomerStoriesSection.tsx @@ -1,6 +1,6 @@ 'use client' -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import Link from 'next/link' import { useState } from 'react' import { cn } from 'ui' diff --git a/apps/www/app/(home)/_components/DashboardFeaturesSection.tsx b/apps/www/app/(home)/_components/DashboardFeaturesSection.tsx index dca41fefd6f..a1088508cd5 100644 --- a/apps/www/app/(home)/_components/DashboardFeaturesSection.tsx +++ b/apps/www/app/(home)/_components/DashboardFeaturesSection.tsx @@ -1,7 +1,7 @@ 'use client' import BrowserFrame from '~/components/BrowserFrame' -import { AnimatePresence, motion, useInView } from 'framer-motion' +import { AnimatePresence, motion, useInView } from 'motion/react' import { useTheme } from 'next-themes' import React, { useRef, useState } from 'react' import { cn } from 'ui' diff --git a/apps/www/app/(home)/_components/FrameworksSectionClient.tsx b/apps/www/app/(home)/_components/FrameworksSectionClient.tsx index 608b7eccd52..085359d6d5f 100644 --- a/apps/www/app/(home)/_components/FrameworksSectionClient.tsx +++ b/apps/www/app/(home)/_components/FrameworksSectionClient.tsx @@ -1,6 +1,6 @@ 'use client' -import { AnimatePresence, motion } from 'framer-motion' +import { AnimatePresence, motion } from 'motion/react' import Link from 'next/link' import { useState } from 'react' import { cn } from 'ui' diff --git a/apps/www/app/(home)/_components/OpenSourceSection.tsx b/apps/www/app/(home)/_components/OpenSourceSection.tsx index 4271c8a3276..9502ea15b51 100644 --- a/apps/www/app/(home)/_components/OpenSourceSection.tsx +++ b/apps/www/app/(home)/_components/OpenSourceSection.tsx @@ -2,7 +2,7 @@ import staticContent from '.generated/staticContent/_index.json' import { useSendTelemetryEvent } from '~/lib/telemetry' -import { useInView } from 'framer-motion' +import { useInView } from 'motion/react' import Link from 'next/link' import { useRef } from 'react' import { Button } from 'ui' diff --git a/apps/www/app/(products)/auth/_components/ApiSectionClient.tsx b/apps/www/app/(products)/auth/_components/ApiSectionClient.tsx index ad30e36cbee..73fdf8aa75f 100644 --- a/apps/www/app/(products)/auth/_components/ApiSectionClient.tsx +++ b/apps/www/app/(products)/auth/_components/ApiSectionClient.tsx @@ -1,8 +1,8 @@ 'use client' import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn' -import { AnimatePresence, motion, useInView } from 'framer-motion' import { ChevronDown, Globe, KeyRound, LogIn, UserPlus } from 'lucide-react' +import { AnimatePresence, motion, useInView } from 'motion/react' import { useCallback, useEffect, useRef, useState } from 'react' import { cn } from 'ui' diff --git a/apps/www/app/(products)/auth/_components/FeaturesSection.tsx b/apps/www/app/(products)/auth/_components/FeaturesSection.tsx index 83f66e8b78b..8c7939a9af6 100644 --- a/apps/www/app/(products)/auth/_components/FeaturesSection.tsx +++ b/apps/www/app/(products)/auth/_components/FeaturesSection.tsx @@ -1,8 +1,8 @@ 'use client' import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn' -import { AnimatePresence, motion } from 'framer-motion' import { Link as LinkIcon } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import Image from 'next/image' import { useEffect, useRef, useState } from 'react' import { cn } from 'ui' diff --git a/apps/www/app/(products)/auth/_components/RLSSectionClient.tsx b/apps/www/app/(products)/auth/_components/RLSSectionClient.tsx index af4d867dce3..cacdc70648f 100644 --- a/apps/www/app/(products)/auth/_components/RLSSectionClient.tsx +++ b/apps/www/app/(products)/auth/_components/RLSSectionClient.tsx @@ -1,7 +1,7 @@ 'use client' import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn' -import { AnimatePresence, motion, useInView } from 'framer-motion' +import { AnimatePresence, motion, useInView } from 'motion/react' import { useCallback, useEffect, useRef, useState } from 'react' import { cn } from 'ui' diff --git a/apps/www/app/(products)/compute/_components/ComputeVisual.tsx b/apps/www/app/(products)/compute/_components/ComputeVisual.tsx index c2f4922c572..7944b815b9b 100644 --- a/apps/www/app/(products)/compute/_components/ComputeVisual.tsx +++ b/apps/www/app/(products)/compute/_components/ComputeVisual.tsx @@ -1,10 +1,10 @@ 'use client' import SectionContainerWithCn from 'components/Layouts/SectionContainerWithCn' -import { AnimatePresence, motion, useReducedMotion } from 'framer-motion' import { Database } from 'icons' import type { LucideIcon } from 'lucide-react' import { Bot, User } from 'lucide-react' +import { AnimatePresence, motion, useReducedMotion } from 'motion/react' import { useCallback, useEffect, useId, useRef, useState } from 'react' import { cn } from 'ui' diff --git a/apps/www/app/(products)/compute/_components/DeploySection.tsx b/apps/www/app/(products)/compute/_components/DeploySection.tsx index 3c2aadb192b..f53420e461f 100644 --- a/apps/www/app/(products)/compute/_components/DeploySection.tsx +++ b/apps/www/app/(products)/compute/_components/DeploySection.tsx @@ -1,7 +1,7 @@ 'use client' import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn' -import { AnimatePresence, motion, useInView, useReducedMotion } from 'framer-motion' +import { AnimatePresence, motion, useInView, useReducedMotion } from 'motion/react' import Link from 'next/link' import { useEffect, useRef, useState } from 'react' import { Button } from 'ui' diff --git a/apps/www/app/(products)/database/_components/ApiSectionClient.tsx b/apps/www/app/(products)/database/_components/ApiSectionClient.tsx index 10ffae261a4..d29e163cfec 100644 --- a/apps/www/app/(products)/database/_components/ApiSectionClient.tsx +++ b/apps/www/app/(products)/database/_components/ApiSectionClient.tsx @@ -1,8 +1,8 @@ 'use client' import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn' -import { AnimatePresence, motion, useInView } from 'framer-motion' import { ArrowDownUp, ChevronDown, Filter, Plus, Search } from 'lucide-react' +import { AnimatePresence, motion, useInView } from 'motion/react' import { useCallback, useEffect, useRef, useState } from 'react' import { cn } from 'ui' diff --git a/apps/www/app/(products)/database/_components/FeaturesSection.tsx b/apps/www/app/(products)/database/_components/FeaturesSection.tsx index d85dc3ee53a..3d35d695383 100644 --- a/apps/www/app/(products)/database/_components/FeaturesSection.tsx +++ b/apps/www/app/(products)/database/_components/FeaturesSection.tsx @@ -1,8 +1,8 @@ 'use client' import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn' -import { AnimatePresence, motion } from 'framer-motion' import { Key } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import { useEffect, useRef, useState } from 'react' import { cn } from 'ui' diff --git a/apps/www/app/(products)/database/_components/SqlEditorSection.tsx b/apps/www/app/(products)/database/_components/SqlEditorSection.tsx index fe8683b4008..80ad0406932 100644 --- a/apps/www/app/(products)/database/_components/SqlEditorSection.tsx +++ b/apps/www/app/(products)/database/_components/SqlEditorSection.tsx @@ -1,8 +1,8 @@ 'use client' import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn' -import { AnimatePresence, motion, useInView } from 'framer-motion' import { Code, FileDown, Heart, MousePointerClick } from 'lucide-react' +import { AnimatePresence, motion, useInView } from 'motion/react' import { useCallback, useEffect, useRef, useState } from 'react' import { cn } from 'ui' diff --git a/apps/www/app/(products)/database/_components/TableEditorSection.tsx b/apps/www/app/(products)/database/_components/TableEditorSection.tsx index af733dc5fc6..9efbc0d0f3a 100644 --- a/apps/www/app/(products)/database/_components/TableEditorSection.tsx +++ b/apps/www/app/(products)/database/_components/TableEditorSection.tsx @@ -1,8 +1,8 @@ 'use client' import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn' -import { AnimatePresence, motion, useInView } from 'framer-motion' import { FileDown, Link2, Table, TableProperties } from 'lucide-react' +import { AnimatePresence, motion, useInView } from 'motion/react' import { useCallback, useEffect, useRef, useState } from 'react' import { cn } from 'ui' diff --git a/apps/www/app/(products)/database/_components/VisualDemo.tsx b/apps/www/app/(products)/database/_components/VisualDemo.tsx index db2e18f1105..bf140f64b33 100644 --- a/apps/www/app/(products)/database/_components/VisualDemo.tsx +++ b/apps/www/app/(products)/database/_components/VisualDemo.tsx @@ -1,8 +1,8 @@ 'use client' import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn' -import { AnimatePresence, motion } from 'framer-motion' import { ChevronDown, Filter, Key, List } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import { useEffect, useRef, useState } from 'react' import { Button } from 'ui' diff --git a/apps/www/app/(products)/edge-functions/_components/CTASection.tsx b/apps/www/app/(products)/edge-functions/_components/CTASection.tsx index a13b23887ec..9d5800ae9cc 100644 --- a/apps/www/app/(products)/edge-functions/_components/CTASection.tsx +++ b/apps/www/app/(products)/edge-functions/_components/CTASection.tsx @@ -1,7 +1,7 @@ 'use client' import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn' -import { AnimatePresence, motion, useInView } from 'framer-motion' +import { AnimatePresence, motion, useInView } from 'motion/react' import { useEffect, useRef, useState } from 'react' import { Button } from 'ui' diff --git a/apps/www/app/(products)/edge-functions/_components/IntegratesSectionClient.tsx b/apps/www/app/(products)/edge-functions/_components/IntegratesSectionClient.tsx index 56dddfac327..1744e5c6318 100644 --- a/apps/www/app/(products)/edge-functions/_components/IntegratesSectionClient.tsx +++ b/apps/www/app/(products)/edge-functions/_components/IntegratesSectionClient.tsx @@ -1,8 +1,8 @@ 'use client' import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn' -import { AnimatePresence, motion, useInView } from 'framer-motion' import { Database, HardDrive, Shield, Webhook, Zap } from 'lucide-react' +import { AnimatePresence, motion, useInView } from 'motion/react' import { useCallback, useEffect, useRef, useState } from 'react' import { cn } from 'ui' diff --git a/apps/www/app/(products)/realtime/_components/ApiSectionClient.tsx b/apps/www/app/(products)/realtime/_components/ApiSectionClient.tsx index 86a16180b91..763daa5af99 100644 --- a/apps/www/app/(products)/realtime/_components/ApiSectionClient.tsx +++ b/apps/www/app/(products)/realtime/_components/ApiSectionClient.tsx @@ -1,8 +1,8 @@ 'use client' import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn' -import { AnimatePresence, motion, useInView } from 'framer-motion' import { Database, Radio, Users } from 'lucide-react' +import { AnimatePresence, motion, useInView } from 'motion/react' import { useCallback, useEffect, useRef, useState } from 'react' import { cn } from 'ui' diff --git a/apps/www/app/(products)/realtime/_components/FeaturesSection.tsx b/apps/www/app/(products)/realtime/_components/FeaturesSection.tsx index 1f31b8f6938..412d814243c 100644 --- a/apps/www/app/(products)/realtime/_components/FeaturesSection.tsx +++ b/apps/www/app/(products)/realtime/_components/FeaturesSection.tsx @@ -1,8 +1,8 @@ 'use client' import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn' -import { motion } from 'framer-motion' import { Key } from 'lucide-react' +import { motion } from 'motion/react' import { useEffect, useRef, useState } from 'react' import { cn } from 'ui' diff --git a/apps/www/app/(products)/storage/_components/ApiSectionClient.tsx b/apps/www/app/(products)/storage/_components/ApiSectionClient.tsx index 3809e5106b8..bcf2e9a1972 100644 --- a/apps/www/app/(products)/storage/_components/ApiSectionClient.tsx +++ b/apps/www/app/(products)/storage/_components/ApiSectionClient.tsx @@ -1,8 +1,8 @@ 'use client' import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn' -import { AnimatePresence, motion, useInView } from 'framer-motion' import { ArrowRightLeft, ChevronDown, Download, List, Upload } from 'lucide-react' +import { AnimatePresence, motion, useInView } from 'motion/react' import { useCallback, useEffect, useRef, useState } from 'react' import { cn } from 'ui' diff --git a/apps/www/app/(products)/storage/_components/PermissionsSectionClient.tsx b/apps/www/app/(products)/storage/_components/PermissionsSectionClient.tsx index 57af15fd110..7562daa5999 100644 --- a/apps/www/app/(products)/storage/_components/PermissionsSectionClient.tsx +++ b/apps/www/app/(products)/storage/_components/PermissionsSectionClient.tsx @@ -1,7 +1,7 @@ 'use client' import SectionContainerWithCn from '~/components/Layouts/SectionContainerWithCn' -import { AnimatePresence, motion, useInView } from 'framer-motion' +import { AnimatePresence, motion, useInView } from 'motion/react' import { useCallback, useEffect, useRef, useState } from 'react' import { cn } from 'ui' diff --git a/apps/www/app/blog/BlogHero.tsx b/apps/www/app/blog/BlogHero.tsx index 4f63439d718..2c00ad20c00 100644 --- a/apps/www/app/blog/BlogHero.tsx +++ b/apps/www/app/blog/BlogHero.tsx @@ -1,7 +1,7 @@ 'use client' import FeaturedThumb from 'components/Blog/FeaturedThumb' -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import Image from 'next/image' import Link from 'next/link' import { usePathname } from 'next/navigation' diff --git a/apps/www/app/partners/catalog/[slug]/PartnerCatalogDetail.tsx b/apps/www/app/partners/catalog/[slug]/PartnerCatalogDetail.tsx index f98bf9969a0..577520bf67a 100644 --- a/apps/www/app/partners/catalog/[slug]/PartnerCatalogDetail.tsx +++ b/apps/www/app/partners/catalog/[slug]/PartnerCatalogDetail.tsx @@ -6,8 +6,8 @@ import { CH } from '@code-hike/mdx/components' import DefaultLayout from '~/components/Layouts/Default' import { type ListingDetail, type Partner } from '~/types/partners' import { useBreakpoint } from 'common' -import { AnimatePresence, motion } from 'framer-motion' import { ArrowUpRight, ChevronLeft, ExternalLink } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import type { SerializeResult as MDXRemoteSerializeResult } from 'next-mdx-remote-client' import { MDXClient } from 'next-mdx-remote-client/csr' import Image from 'next/image' diff --git a/apps/www/app/state-of-startups/StateOfStartups2026Content.tsx b/apps/www/app/state-of-startups/StateOfStartups2026Content.tsx index 892f97c71b3..cf1b72c0e6a 100644 --- a/apps/www/app/state-of-startups/StateOfStartups2026Content.tsx +++ b/apps/www/app/state-of-startups/StateOfStartups2026Content.tsx @@ -3,7 +3,7 @@ import DefaultLayout from '~/components/Layouts/Default' import pageData from '~/data/surveys/state-of-startups-2026' import { useSendTelemetryEvent } from '~/lib/telemetry' -import { AnimatePresence, motion } from 'framer-motion' +import { AnimatePresence, motion } from 'motion/react' import Link from 'next/link' import { forwardRef, useEffect, useRef, useState, type RefObject } from 'react' import { Button, cn } from 'ui' diff --git a/apps/www/app/state-of-startups/components/StateOfStartupsAuroraHeader.tsx b/apps/www/app/state-of-startups/components/StateOfStartupsAuroraHeader.tsx index 3ddf412a970..b0b4cb4ca3c 100644 --- a/apps/www/app/state-of-startups/components/StateOfStartupsAuroraHeader.tsx +++ b/apps/www/app/state-of-startups/components/StateOfStartupsAuroraHeader.tsx @@ -1,6 +1,6 @@ 'use client' -import { useReducedMotion } from 'framer-motion' +import { useReducedMotion } from 'motion/react' import { useTheme } from 'next-themes' import { useEffect, useState } from 'react' import UnicornScene from 'unicornstudio-react/next' diff --git a/apps/www/app/state-of-startups/components/SurveyChart.tsx b/apps/www/app/state-of-startups/components/SurveyChart.tsx index 6d7d7311e27..e749985d911 100644 --- a/apps/www/app/state-of-startups/components/SurveyChart.tsx +++ b/apps/www/app/state-of-startups/components/SurveyChart.tsx @@ -1,7 +1,7 @@ 'use client' import CodeBlock from '~/components/CodeBlock/CodeBlock' -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import { useMemo, useState } from 'react' import { Button } from 'ui' diff --git a/apps/www/app/state-of-startups/components/YearToggle.tsx b/apps/www/app/state-of-startups/components/YearToggle.tsx index 5aa2955f4df..ec6279ddc6c 100644 --- a/apps/www/app/state-of-startups/components/YearToggle.tsx +++ b/apps/www/app/state-of-startups/components/YearToggle.tsx @@ -1,6 +1,6 @@ 'use client' -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import { cn } from 'ui' import { SURVEY_YEARS, useYear, type SurveyYear } from './year-context' diff --git a/apps/www/app/state-of-startups/register/RegisterContent.tsx b/apps/www/app/state-of-startups/register/RegisterContent.tsx index e02aee634c0..2d25368c32c 100644 --- a/apps/www/app/state-of-startups/register/RegisterContent.tsx +++ b/apps/www/app/state-of-startups/register/RegisterContent.tsx @@ -1,7 +1,7 @@ 'use client' -import { motion, useReducedMotion } from 'framer-motion' import { ArrowRight } from 'lucide-react' +import { motion, useReducedMotion } from 'motion/react' import dynamic from 'next/dynamic' import Image from 'next/image' import Link from 'next/link' diff --git a/apps/www/components/AIDemo/DotGrid.tsx b/apps/www/components/AIDemo/DotGrid.tsx index bbcc267198f..4a0662c41c0 100644 --- a/apps/www/components/AIDemo/DotGrid.tsx +++ b/apps/www/components/AIDemo/DotGrid.tsx @@ -1,5 +1,5 @@ +import { motion } from 'motion/react' import React from 'react' -import { motion } from 'framer-motion' interface DotGridProps { rows: number diff --git a/apps/www/components/AIDemo/Panel.tsx b/apps/www/components/AIDemo/Panel.tsx index 613384a2ce1..5899eb96627 100644 --- a/apps/www/components/AIDemo/Panel.tsx +++ b/apps/www/components/AIDemo/Panel.tsx @@ -1,5 +1,5 @@ // components/AIDemoPanel.tsx -import { AnimatePresence, motion } from 'framer-motion' +import { AnimatePresence, motion } from 'motion/react' import Image from 'next/image' import errorGif from 'public/images/ai/error.gif' import { useEffect, useRef, useState } from 'react' diff --git a/apps/www/components/AIDemo/SqlSnippet.tsx b/apps/www/components/AIDemo/SqlSnippet.tsx index f096ee9cae8..2e6025ab733 100644 --- a/apps/www/components/AIDemo/SqlSnippet.tsx +++ b/apps/www/components/AIDemo/SqlSnippet.tsx @@ -1,5 +1,5 @@ -import { motion } from 'framer-motion' import { Code, DatabaseIcon, Play } from 'lucide-react' +import { motion } from 'motion/react' import { useEffect, useState } from 'react' import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts' import { Button, ChartContainer, ChartTooltip, ChartTooltipContent, cn, SQL_ICON } from 'ui' diff --git a/apps/www/components/Blog/BlogFilters.tsx b/apps/www/components/Blog/BlogFilters.tsx index c330e5cbc7b..b91ec5108c7 100644 --- a/apps/www/components/Blog/BlogFilters.tsx +++ b/apps/www/components/Blog/BlogFilters.tsx @@ -3,9 +3,9 @@ import { type BlogView } from 'app/blog/blog-view' import { useBreakpoint } from 'common' import BlogViewToggle from 'components/Blog/BlogViewToggle' -import { motion } from 'framer-motion' import { startCase } from 'lib/helpers' import { ChevronDown, X as CloseIcon, Search } from 'lucide-react' +import { motion } from 'motion/react' import Link from 'next/link' import { usePathname, useRouter, useSearchParams } from 'next/navigation' import { useCallback, useEffect, useState } from 'react' diff --git a/apps/www/components/Blog/BlogViewToggle.tsx b/apps/www/components/Blog/BlogViewToggle.tsx index 770e03beb1c..f293f33b564 100644 --- a/apps/www/components/Blog/BlogViewToggle.tsx +++ b/apps/www/components/Blog/BlogViewToggle.tsx @@ -1,8 +1,8 @@ 'use client' import { setBlogViewCookie, type BlogView } from 'app/blog/blog-view' -import { motion } from 'framer-motion' import { AlignJustify, Grid } from 'lucide-react' +import { motion } from 'motion/react' import { cn } from 'ui' export default function BlogViewToggle({ diff --git a/apps/www/components/CustomerStories/CustomersFilters.tsx b/apps/www/components/CustomerStories/CustomersFilters.tsx index bc08d9a439a..21cbc1ec368 100644 --- a/apps/www/components/CustomerStories/CustomersFilters.tsx +++ b/apps/www/components/CustomerStories/CustomersFilters.tsx @@ -2,9 +2,9 @@ import type PostTypes from '~/types/post' import { useBreakpoint } from 'common' -import { AnimatePresence, motion } from 'framer-motion' import { startCase } from 'lib/helpers' import { ChevronDown, X as CloseIcon } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import { useRouter } from 'next/compat/router' import { usePathname } from 'next/navigation' import { useEffect, useState } from 'react' diff --git a/apps/www/components/EnterpriseFormQuotes.tsx b/apps/www/components/EnterpriseFormQuotes.tsx index 3d1e1e548cc..f34da4bc2e5 100644 --- a/apps/www/components/EnterpriseFormQuotes.tsx +++ b/apps/www/components/EnterpriseFormQuotes.tsx @@ -1,4 +1,4 @@ -import { AnimatePresence, motion, useAnimation } from 'framer-motion' +import { AnimatePresence, motion, useAnimation } from 'motion/react' import { useEffect, useState, type ReactNode } from 'react' import { cn } from 'ui' diff --git a/apps/www/components/Events/EventsFilters.tsx b/apps/www/components/Events/EventsFilters.tsx index fb852432e89..e23bd3044f8 100644 --- a/apps/www/components/Events/EventsFilters.tsx +++ b/apps/www/components/Events/EventsFilters.tsx @@ -1,7 +1,7 @@ import { useBreakpoint } from 'common' -import { AnimatePresence, motion } from 'framer-motion' import { startCase } from 'lib/helpers' import { ChevronDown, X as CloseIcon, Search } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import { useRouter } from 'next/compat/router' import Link from 'next/link' import { useSearchParams } from 'next/navigation' diff --git a/apps/www/components/Hero/HeroFrameworks.tsx b/apps/www/components/Hero/HeroFrameworks.tsx index f6b50c7b4b9..4fa476f0b21 100644 --- a/apps/www/components/Hero/HeroFrameworks.tsx +++ b/apps/www/components/Hero/HeroFrameworks.tsx @@ -1,10 +1,11 @@ +import { EASE_IN, EASE_OUT } from '~/lib/animations' +import { useSendTelemetryEvent } from '~/lib/telemetry' import { useBreakpoint } from 'common' -import { AnimatePresence, motion } from 'framer-motion' +import { AnimatePresence, motion } from 'motion/react' import Link from 'next/link' import { useState } from 'react' import { cn } from 'ui' -import { EASE_IN, EASE_OUT } from '~/lib/animations' -import { useSendTelemetryEvent } from '~/lib/telemetry' + import SectionContainer from '../Layouts/SectionContainer' type Framework = { diff --git a/apps/www/components/ImageGrid.tsx b/apps/www/components/ImageGrid.tsx index 73fd6e500a9..30339f1c4c3 100644 --- a/apps/www/components/ImageGrid.tsx +++ b/apps/www/components/ImageGrid.tsx @@ -1,6 +1,6 @@ 'use client' -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import Image from 'next/image' import Link from 'next/link' import { cn } from 'ui' diff --git a/apps/www/components/LaunchWeek/11/Releases/BuildStage.tsx b/apps/www/components/LaunchWeek/11/Releases/BuildStage.tsx index b2141cda262..a6fb69f96ad 100644 --- a/apps/www/components/LaunchWeek/11/Releases/BuildStage.tsx +++ b/apps/www/components/LaunchWeek/11/Releases/BuildStage.tsx @@ -1,6 +1,6 @@ import { buildDays as days } from '~/components/LaunchWeek/11/Releases/data' import SectionContainer from '~/components/Layouts/SectionContainer' -import { motion, useInView } from 'framer-motion' +import { motion, useInView } from 'motion/react' import React, { FC } from 'react' import { cn } from 'ui' diff --git a/apps/www/components/LaunchWeek/11/Releases/components/AdventCard.tsx b/apps/www/components/LaunchWeek/11/Releases/components/AdventCard.tsx index 04abca107f9..65a91123c17 100644 --- a/apps/www/components/LaunchWeek/11/Releases/components/AdventCard.tsx +++ b/apps/www/components/LaunchWeek/11/Releases/components/AdventCard.tsx @@ -1,10 +1,10 @@ -import React, { useEffect, useRef, useState } from 'react' +import { useBreakpoint } from 'common' +import { motion } from 'motion/react' import Link from 'next/link' -import { motion } from 'framer-motion' -import Tilt from 'vanilla-tilt' +import React, { useEffect, useRef, useState } from 'react' import { useWindowSize } from 'react-use' import { cn } from 'ui' -import { useBreakpoint } from 'common' +import Tilt from 'vanilla-tilt' import { AdventDay } from '../data' import { AdventLink } from '../data/lw11_build_stage' diff --git a/apps/www/components/LaunchWeek/12/Releases/BuildStage.tsx b/apps/www/components/LaunchWeek/12/Releases/BuildStage.tsx index 34f870bb40e..edc63d1c0df 100644 --- a/apps/www/components/LaunchWeek/12/Releases/BuildStage.tsx +++ b/apps/www/components/LaunchWeek/12/Releases/BuildStage.tsx @@ -1,6 +1,6 @@ import { buildDays as days } from '~/components/LaunchWeek/12/Releases/data' import SectionContainer from '~/components/Layouts/SectionContainer' -import { motion, useInView } from 'framer-motion' +import { motion, useInView } from 'motion/react' import React, { FC } from 'react' import { cn } from 'ui' diff --git a/apps/www/components/LaunchWeek/12/Releases/components/BuildCard.tsx b/apps/www/components/LaunchWeek/12/Releases/components/BuildCard.tsx index 9d872e9a0ef..20bea6cd4f4 100644 --- a/apps/www/components/LaunchWeek/12/Releases/components/BuildCard.tsx +++ b/apps/www/components/LaunchWeek/12/Releases/components/BuildCard.tsx @@ -1,10 +1,10 @@ -import React, { useEffect, useRef, useState } from 'react' +import { useBreakpoint } from 'common' +import { motion } from 'motion/react' import Link from 'next/link' -import { motion } from 'framer-motion' -import Tilt from 'vanilla-tilt' +import React, { useEffect, useRef, useState } from 'react' import { useWindowSize } from 'react-use' import { cn } from 'ui' -import { useBreakpoint } from 'common' +import Tilt from 'vanilla-tilt' import { AdventDay } from '../data' import { AdventLink } from '../data/lw12_build_stage' diff --git a/apps/www/components/LaunchWeek/13/Releases/BuildStage.tsx b/apps/www/components/LaunchWeek/13/Releases/BuildStage.tsx index f9c3cfa539d..39c48db8f4f 100644 --- a/apps/www/components/LaunchWeek/13/Releases/BuildStage.tsx +++ b/apps/www/components/LaunchWeek/13/Releases/BuildStage.tsx @@ -1,6 +1,6 @@ import { buildDays as days } from '~/components/LaunchWeek/13/Releases/data' import SectionContainer from '~/components/Layouts/SectionContainer' -import { motion, useInView } from 'framer-motion' +import { motion, useInView } from 'motion/react' import React, { FC } from 'react' import { cn } from 'ui' diff --git a/apps/www/components/LaunchWeek/13/Releases/components/BuildCard.tsx b/apps/www/components/LaunchWeek/13/Releases/components/BuildCard.tsx index b62d411201d..adccfee0526 100644 --- a/apps/www/components/LaunchWeek/13/Releases/components/BuildCard.tsx +++ b/apps/www/components/LaunchWeek/13/Releases/components/BuildCard.tsx @@ -1,10 +1,10 @@ -import React, { useEffect, useRef, useState } from 'react' +import { useBreakpoint } from 'common' +import { motion } from 'motion/react' import Link from 'next/link' -import { motion } from 'framer-motion' -import Tilt from 'vanilla-tilt' +import React, { useEffect, useRef, useState } from 'react' import { useWindowSize } from 'react-use' import { cn } from 'ui' -import { useBreakpoint } from 'common' +import Tilt from 'vanilla-tilt' import { AdventDay } from '../data' import { AdventLink } from '../data/lw13_build_stage' diff --git a/apps/www/components/LaunchWeek/14/Releases/BuildStage.tsx b/apps/www/components/LaunchWeek/14/Releases/BuildStage.tsx index b2fbe8e20fd..69b85a43c55 100644 --- a/apps/www/components/LaunchWeek/14/Releases/BuildStage.tsx +++ b/apps/www/components/LaunchWeek/14/Releases/BuildStage.tsx @@ -1,6 +1,6 @@ import { buildDays as days } from '~/components/LaunchWeek/14/Releases/data' import SectionContainer from '~/components/Layouts/SectionContainer' -import { motion, useInView } from 'framer-motion' +import { motion, useInView } from 'motion/react' import React, { FC } from 'react' import { cn } from 'ui' diff --git a/apps/www/components/LaunchWeek/14/Releases/components/BuildCard.tsx b/apps/www/components/LaunchWeek/14/Releases/components/BuildCard.tsx index b4be1dc409f..4cf8bf54d95 100644 --- a/apps/www/components/LaunchWeek/14/Releases/components/BuildCard.tsx +++ b/apps/www/components/LaunchWeek/14/Releases/components/BuildCard.tsx @@ -1,10 +1,10 @@ -import React, { useEffect, useRef, useState } from 'react' +import { useBreakpoint } from 'common' +import { motion } from 'motion/react' import Link from 'next/link' -import { motion } from 'framer-motion' -import Tilt from 'vanilla-tilt' +import React, { useEffect, useRef, useState } from 'react' import { useWindowSize } from 'react-use' import { cn } from 'ui' -import { useBreakpoint } from 'common' +import Tilt from 'vanilla-tilt' import { AdventDay } from '../data' import { AdventLink } from '../data/lw14_build_stage' diff --git a/apps/www/components/LaunchWeek/15/LW15BuildStage.tsx b/apps/www/components/LaunchWeek/15/LW15BuildStage.tsx index 333d7bdce07..392ad0dad04 100644 --- a/apps/www/components/LaunchWeek/15/LW15BuildStage.tsx +++ b/apps/www/components/LaunchWeek/15/LW15BuildStage.tsx @@ -1,10 +1,9 @@ -import React, { FC } from 'react' -import Link from 'next/link' -import { motion, useInView } from 'framer-motion' -import { cn } from 'ui' - import { buildDays as days } from 'components/LaunchWeek/15/data' import SectionContainer from 'components/Layouts/SectionContainer' +import { motion, useInView } from 'motion/react' +import Link from 'next/link' +import React, { FC } from 'react' +import { cn } from 'ui' const LW15BuildStage: FC = () => { const ref = React.useRef(null) diff --git a/apps/www/components/LaunchWeek/15/LW15Hackathon.tsx b/apps/www/components/LaunchWeek/15/LW15Hackathon.tsx index a0e7eaafdc0..18544726518 100644 --- a/apps/www/components/LaunchWeek/15/LW15Hackathon.tsx +++ b/apps/www/components/LaunchWeek/15/LW15Hackathon.tsx @@ -1,6 +1,6 @@ import SectionContainer from 'components/Layouts/SectionContainer' -import { motion, useInView } from 'framer-motion' import { DEFAULT_EASE } from 'lib/animations' +import { motion, useInView } from 'motion/react' import Image from 'next/image' import Link from 'next/link' import React, { FC } from 'react' diff --git a/apps/www/components/LaunchWeek/15/LW15Meetups.tsx b/apps/www/components/LaunchWeek/15/LW15Meetups.tsx index c14b489d869..7f097098138 100644 --- a/apps/www/components/LaunchWeek/15/LW15Meetups.tsx +++ b/apps/www/components/LaunchWeek/15/LW15Meetups.tsx @@ -1,12 +1,13 @@ -import React, { PropsWithChildren, useState, useRef, useCallback, useEffect } from 'react' -import { cn } from 'ui' -import Image from 'next/image' -import Link from 'next/link' -import { motion, useInView } from 'framer-motion' -import { FifteenSVG, LWSVG } from './lw15.components' +import { LumaEvent } from 'app/api-v2/luma-events/route' import SectionContainer from 'components/Layouts/SectionContainer' import { DEFAULT_EASE } from 'lib/animations' -import { LumaEvent } from 'app/api-v2/luma-events/route' +import { motion, useInView } from 'motion/react' +import Image from 'next/image' +import Link from 'next/link' +import React, { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react' +import { cn } from 'ui' + +import { FifteenSVG, LWSVG } from './lw15.components' interface Props { className?: string diff --git a/apps/www/components/LaunchWeek/7/BlogLinks.tsx b/apps/www/components/LaunchWeek/7/BlogLinks.tsx index e3e78bd5d85..35241aaba7d 100644 --- a/apps/www/components/LaunchWeek/7/BlogLinks.tsx +++ b/apps/www/components/LaunchWeek/7/BlogLinks.tsx @@ -1,7 +1,7 @@ 'use client' import days from '~/components/LaunchWeek/7/lw7_days' -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import Image from 'next/image' import Link from 'next/link' import React from 'react' diff --git a/apps/www/components/LaunchWeek/7/LW7BgGraphic.tsx b/apps/www/components/LaunchWeek/7/LW7BgGraphic.tsx index ca1bd8a9298..e4a2390a50e 100644 --- a/apps/www/components/LaunchWeek/7/LW7BgGraphic.tsx +++ b/apps/www/components/LaunchWeek/7/LW7BgGraphic.tsx @@ -1,6 +1,7 @@ -import { motion, useScroll, useTransform } from 'framer-motion' -import Image from 'next/image' import { useBreakpoint } from 'common/hooks/useBreakpoint' +import { motion, useScroll, useTransform } from 'motion/react' +import Image from 'next/image' + import styles from './lw7-bg-graphic.module.css' export default function LW7BgGraphic() { diff --git a/apps/www/components/LaunchWeek/7/LaunchSection/LaunchWeekLogoHeader.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/LaunchWeekLogoHeader.tsx index 7c16bd8b40e..3310747e641 100644 --- a/apps/www/components/LaunchWeek/7/LaunchSection/LaunchWeekLogoHeader.tsx +++ b/apps/www/components/LaunchWeek/7/LaunchSection/LaunchWeekLogoHeader.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames' -import Image from 'next/image' -import { motion } from 'framer-motion' import { useBreakpoint } from 'common/hooks/useBreakpoint' +import { motion } from 'motion/react' +import Image from 'next/image' export function LaunchWeekLogoHeader() { const isMobile = useBreakpoint(640) diff --git a/apps/www/components/LaunchWeek/7/LaunchWeekPrizeCard.tsx b/apps/www/components/LaunchWeek/7/LaunchWeekPrizeCard.tsx index 79e630df958..47ae9b31735 100644 --- a/apps/www/components/LaunchWeek/7/LaunchWeekPrizeCard.tsx +++ b/apps/www/components/LaunchWeek/7/LaunchWeekPrizeCard.tsx @@ -1,4 +1,4 @@ -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import Image from 'next/image' import React from 'react' diff --git a/apps/www/components/LaunchWeek/7/LaunchWeekPrizeSection.tsx b/apps/www/components/LaunchWeek/7/LaunchWeekPrizeSection.tsx index 8087b96e367..718a88c3d37 100644 --- a/apps/www/components/LaunchWeek/7/LaunchWeekPrizeSection.tsx +++ b/apps/www/components/LaunchWeek/7/LaunchWeekPrizeSection.tsx @@ -1,7 +1,8 @@ +import { motion } from 'motion/react' import React from 'react' + import LabelBadge from './LabelBadge' import LaunchWeekPrizeCard from './LaunchWeekPrizeCard' -import { motion } from 'framer-motion' export default function LaunchWeekPrizeSection({ className, diff --git a/apps/www/components/LaunchWeek/7/Releases/Day5.tsx b/apps/www/components/LaunchWeek/7/Releases/Day5.tsx index 7de82e27489..40f15aa2d42 100644 --- a/apps/www/components/LaunchWeek/7/Releases/Day5.tsx +++ b/apps/www/components/LaunchWeek/7/Releases/Day5.tsx @@ -1,7 +1,11 @@ -import React from 'react' -import Image from 'next/image' -import { motion } from 'framer-motion' +import { opacityVariant4, scaleOpacityVariant2 } from '.' +import { WeekDayProps } from '~/components/LaunchWeek/7/lw7_days' import { useBreakpoint } from 'common/hooks/useBreakpoint' +import { motion } from 'motion/react' +import Image from 'next/image' +import Link from 'next/link' +import React from 'react' + import { ArrowTopRightSvg, CartTitle, @@ -10,12 +14,7 @@ import { SectionButtons, StyledArticleBadge, } from './components' - -import { WeekDayProps } from '~/components/LaunchWeek/7/lw7_days' -import { opacityVariant4, scaleOpacityVariant2 } from '.' - import styles from './day5.module.css' -import Link from 'next/link' const getDay5Motion = (index: number) => { switch (index) { diff --git a/apps/www/components/LaunchWeek/7/Releases/index.tsx b/apps/www/components/LaunchWeek/7/Releases/index.tsx index ff934000b3f..50ca97f4973 100644 --- a/apps/www/components/LaunchWeek/7/Releases/index.tsx +++ b/apps/www/components/LaunchWeek/7/Releases/index.tsx @@ -1,7 +1,7 @@ import days, { endOfLW7, WeekDayProps } from '~/components/LaunchWeek/7/lw7_days' import SectionContainer from '~/components/Layouts/SectionContainer' import { useBreakpoint } from 'common/hooks/useBreakpoint' -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import Image from 'next/image' import { useEffect } from 'react' import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from 'ui' diff --git a/apps/www/components/LaunchWeek/8/LaunchWeekPrizeCard.tsx b/apps/www/components/LaunchWeek/8/LaunchWeekPrizeCard.tsx index 0f49cdeb121..00e59482a65 100644 --- a/apps/www/components/LaunchWeek/8/LaunchWeekPrizeCard.tsx +++ b/apps/www/components/LaunchWeek/8/LaunchWeekPrizeCard.tsx @@ -1,4 +1,4 @@ -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import Image from 'next/image' import React from 'react' import { cn } from 'ui' diff --git a/apps/www/components/LaunchWeek/X/Releases/BuildStage.tsx b/apps/www/components/LaunchWeek/X/Releases/BuildStage.tsx index 7963d675e79..e1c3c99965f 100644 --- a/apps/www/components/LaunchWeek/X/Releases/BuildStage.tsx +++ b/apps/www/components/LaunchWeek/X/Releases/BuildStage.tsx @@ -1,11 +1,11 @@ -import React, { FC } from 'react' import { buildDays as days } from '~/components/LaunchWeek/X/Releases/data' - import SectionContainer from '~/components/Layouts/SectionContainer' -import AdventCard from './components/AdventCard' -import { motion, useInView } from 'framer-motion' +import { motion, useInView } from 'motion/react' +import React, { FC } from 'react' import { cn } from 'ui' +import AdventCard from './components/AdventCard' + const BuildStage: FC = () => { const ref = React.useRef(null) const isInView = useInView(ref, { margin: '-25%', once: true }) diff --git a/apps/www/components/LaunchWeek/X/Releases/components/AdventCard.tsx b/apps/www/components/LaunchWeek/X/Releases/components/AdventCard.tsx index 7802c0a4b45..79832101281 100644 --- a/apps/www/components/LaunchWeek/X/Releases/components/AdventCard.tsx +++ b/apps/www/components/LaunchWeek/X/Releases/components/AdventCard.tsx @@ -1,10 +1,10 @@ -import React, { useEffect, useRef, useState } from 'react' +import { useBreakpoint } from 'common' +import { motion } from 'motion/react' import Link from 'next/link' -import { motion } from 'framer-motion' -import Tilt from 'vanilla-tilt' +import React, { useEffect, useRef, useState } from 'react' import { useWindowSize } from 'react-use' import { cn } from 'ui' -import { useBreakpoint } from 'common' +import Tilt from 'vanilla-tilt' import { AdventDay } from '../data' import { AdventLink } from '../data/lwx_advent_days' diff --git a/apps/www/components/MagnifiedProducts.tsx b/apps/www/components/MagnifiedProducts.tsx index 685dabbcc10..1d2c6b7afd8 100644 --- a/apps/www/components/MagnifiedProducts.tsx +++ b/apps/www/components/MagnifiedProducts.tsx @@ -1,18 +1,15 @@ -import { useRef } from 'react' -import Link from 'next/link' +import { DEFAULT_TRANSITION } from '~/lib/animations' +import { useBreakpoint } from 'common' import { - MotionValue, motion, + MotionValue, useInView, useMotionValue, useSpring, useTransform, -} from 'framer-motion' -import { useBreakpoint } from 'common' -import { Products } from './Sections/ProductsCta' -import { cn } from 'ui' - -import { DEFAULT_TRANSITION } from '~/lib/animations' +} from 'motion/react' +import Link from 'next/link' +import { useRef } from 'react' import { PRODUCT_MODULES, PRODUCT_MODULES_NAMES, @@ -21,6 +18,9 @@ import { PRODUCT_SHORTNAMES, products as PRODUCTS, } from 'shared-data/products' +import { cn } from 'ui' + +import { Products } from './Sections/ProductsCta' function MagnifiedProducts({ currentProduct }: { currentProduct: Products | string }) { let mouseX = useMotionValue(Infinity) diff --git a/apps/www/components/Nav/MobileMenu.tsx b/apps/www/components/Nav/MobileMenu.tsx index 1898ac58d1b..58dc3c6bf37 100644 --- a/apps/www/components/Nav/MobileMenu.tsx +++ b/apps/www/components/Nav/MobileMenu.tsx @@ -2,8 +2,8 @@ import { type Menu } from '~/data/nav' import { useIsLoggedIn, useIsUserLoading } from 'common' -import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion' import { ChevronRight } from 'lucide-react' +import { AnimatePresence, domAnimation, LazyMotion, m } from 'motion/react' import Link from 'next/link' import { useEffect } from 'react' import type { Dispatch, SetStateAction } from 'react' diff --git a/apps/www/components/Nav/SolutionsDropdown.tsx b/apps/www/components/Nav/SolutionsDropdown.tsx index 2bb7fc0c930..8491cfe8be8 100644 --- a/apps/www/components/Nav/SolutionsDropdown.tsx +++ b/apps/www/components/Nav/SolutionsDropdown.tsx @@ -1,7 +1,7 @@ import { useBreakpoint, useReducedMotion } from 'common' import { navData as DevelopersData } from 'data/Solutions' -import { AnimatePresence, motion } from 'framer-motion' import { ArrowLeftRight, ChevronRight } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import Link from 'next/link' import { useState } from 'react' import { useMedia } from 'react-use' diff --git a/apps/www/components/OpenSource/OSSHero.tsx b/apps/www/components/OpenSource/OSSHero.tsx index 16d5dad67db..d08a6fbfef7 100644 --- a/apps/www/components/OpenSource/OSSHero.tsx +++ b/apps/www/components/OpenSource/OSSHero.tsx @@ -1,5 +1,5 @@ import { useBreakpoint } from 'common' -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import { useTheme } from 'next-themes' import React from 'react' import { useWindowSize } from 'react-use' diff --git a/apps/www/components/OpenSource/RepoCard.tsx b/apps/www/components/OpenSource/RepoCard.tsx index 85eb2cc2a26..9cfab2ed617 100644 --- a/apps/www/components/OpenSource/RepoCard.tsx +++ b/apps/www/components/OpenSource/RepoCard.tsx @@ -1,9 +1,8 @@ -import { motion } from 'framer-motion' -import { Star } from 'lucide-react' -import Link from 'next/link' - import Panel from '~/components/Panel' import { useSendTelemetryEvent } from '~/lib/telemetry' +import { Star } from 'lucide-react' +import { motion } from 'motion/react' +import Link from 'next/link' const RepoCard = ({ repo, activeTab, index }: { repo: any; activeTab: number; index: number }) => { const sendTelemetryEvent = useSendTelemetryEvent() diff --git a/apps/www/components/OpenSource/Repos.tsx b/apps/www/components/OpenSource/Repos.tsx index 6027a2f9127..3b1e5b9ed28 100644 --- a/apps/www/components/OpenSource/Repos.tsx +++ b/apps/www/components/OpenSource/Repos.tsx @@ -1,5 +1,5 @@ -import { AnimatePresence } from 'framer-motion' import { Pencil, Users, Users2 } from 'lucide-react' +import { AnimatePresence } from 'motion/react' import Link from 'next/link' import React, { useEffect, useState } from 'react' import { Swiper, SwiperSlide } from 'swiper/react' diff --git a/apps/www/components/Panel/Panel.tsx b/apps/www/components/Panel/Panel.tsx index ad3bddf340b..5a3531b877a 100644 --- a/apps/www/components/Panel/Panel.tsx +++ b/apps/www/components/Panel/Panel.tsx @@ -1,7 +1,7 @@ 'use client' import { detectBrowser, isBrowser } from 'common' -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import React, { PropsWithChildren, useEffect, useRef } from 'react' import { cn } from 'ui' diff --git a/apps/www/components/Pricing/CostControlAnimation.tsx b/apps/www/components/Pricing/CostControlAnimation.tsx index 7e247cc7466..5498811dfd5 100644 --- a/apps/www/components/Pricing/CostControlAnimation.tsx +++ b/apps/www/components/Pricing/CostControlAnimation.tsx @@ -1,8 +1,8 @@ 'use client' +import { AnimatePresence, motion, useInView } from 'motion/react' import React, { FC, useRef, useState } from 'react' -import { AnimatePresence, motion, useInView } from 'framer-motion' -import { Switch, cn } from 'ui' +import { cn, Switch } from 'ui' interface Props { className?: string diff --git a/apps/www/components/Products/Functions/CI.tsx b/apps/www/components/Products/Functions/CI.tsx index a2c546e92f8..ee51728eeaf 100644 --- a/apps/www/components/Products/Functions/CI.tsx +++ b/apps/www/components/Products/Functions/CI.tsx @@ -1,6 +1,6 @@ 'use client' -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import { useEffect, useState } from 'react' const CODE_LINES = [ diff --git a/apps/www/components/Products/Functions/LocalDXImage.tsx b/apps/www/components/Products/Functions/LocalDXImage.tsx index bc01d4a5ee2..9accd4227f6 100644 --- a/apps/www/components/Products/Functions/LocalDXImage.tsx +++ b/apps/www/components/Products/Functions/LocalDXImage.tsx @@ -1,7 +1,7 @@ 'use client' -import { AnimatePresence, motion } from 'framer-motion' import { Check, Copy } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import Image from 'next/image' import { useEffect, useRef, useState } from 'react' import CopyToClipboard from 'react-copy-to-clipboard' diff --git a/apps/www/components/Products/Functions/NpmEcosystem.tsx b/apps/www/components/Products/Functions/NpmEcosystem.tsx index 4557551de6d..67dc33a46ae 100644 --- a/apps/www/components/Products/Functions/NpmEcosystem.tsx +++ b/apps/www/components/Products/Functions/NpmEcosystem.tsx @@ -1,6 +1,6 @@ 'use client' -import { motion } from 'framer-motion' +import { motion } from 'motion/react' const npmList = [ 'fetch', diff --git a/apps/www/components/Products/Functions/ParityImage.tsx b/apps/www/components/Products/Functions/ParityImage.tsx index 6b9417247cc..cb32cdb6e8e 100644 --- a/apps/www/components/Products/Functions/ParityImage.tsx +++ b/apps/www/components/Products/Functions/ParityImage.tsx @@ -1,6 +1,6 @@ 'use client' -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import Image from 'next/image' import { cn } from 'ui' diff --git a/apps/www/components/Products/Functions/QueryLogs.tsx b/apps/www/components/Products/Functions/QueryLogs.tsx index f00c6bcf7c8..4718c0effa8 100644 --- a/apps/www/components/Products/Functions/QueryLogs.tsx +++ b/apps/www/components/Products/Functions/QueryLogs.tsx @@ -1,6 +1,6 @@ import dayjs from 'dayjs' -import { AnimatePresence, motion } from 'framer-motion' import { AlertCircle, Info } from 'lucide-react' +import { AnimatePresence, motion } from 'motion/react' import { useEffect, useState } from 'react' import { useInterval } from 'react-use' import { cn } from 'ui' diff --git a/apps/www/components/Products/Functions/RealtimeLogs.tsx b/apps/www/components/Products/Functions/RealtimeLogs.tsx index 66500433799..133f604c30a 100644 --- a/apps/www/components/Products/Functions/RealtimeLogs.tsx +++ b/apps/www/components/Products/Functions/RealtimeLogs.tsx @@ -1,5 +1,5 @@ import dayjs from 'dayjs' -import { AnimatePresence, motion } from 'framer-motion' +import { AnimatePresence, motion } from 'motion/react' import { FC, useEffect, useState } from 'react' import { useInterval } from 'react-use' import { Badge, cn } from 'ui' diff --git a/apps/www/components/Products/VectorAI/CustomersVisual.tsx b/apps/www/components/Products/VectorAI/CustomersVisual.tsx index 4e731029508..d2d48e4a51d 100644 --- a/apps/www/components/Products/VectorAI/CustomersVisual.tsx +++ b/apps/www/components/Products/VectorAI/CustomersVisual.tsx @@ -1,5 +1,5 @@ import { DEFAULT_EASE } from '~/lib/animations' -import { m } from 'framer-motion' +import { m } from 'motion/react' import React from 'react' const CustomersVisual = () => { diff --git a/apps/www/components/Products/VectorAI/IntegrationsImage.tsx b/apps/www/components/Products/VectorAI/IntegrationsImage.tsx index b3341becd10..dadd737fe1d 100644 --- a/apps/www/components/Products/VectorAI/IntegrationsImage.tsx +++ b/apps/www/components/Products/VectorAI/IntegrationsImage.tsx @@ -1,9 +1,9 @@ -import React, { useRef } from 'react' -import Image from 'next/image' -import { useTheme } from 'next-themes' -import { LazyMotion, domAnimation, m, useInView } from 'framer-motion' -import { INITIAL_BOTTOM, getAnimation } from '~/lib/animations' +import { getAnimation, INITIAL_BOTTOM } from '~/lib/animations' import { useBreakpoint } from 'common' +import { domAnimation, LazyMotion, m, useInView } from 'motion/react' +import { useTheme } from 'next-themes' +import Image from 'next/image' +import React, { useRef } from 'react' const IntegrationsImage = () => { const ref = useRef(null) diff --git a/apps/www/components/Products/VectorAI/OpenAIImage.tsx b/apps/www/components/Products/VectorAI/OpenAIImage.tsx index 62cba18db9d..368fc86d23e 100644 --- a/apps/www/components/Products/VectorAI/OpenAIImage.tsx +++ b/apps/www/components/Products/VectorAI/OpenAIImage.tsx @@ -1,7 +1,7 @@ +import { domAnimation, LazyMotion, m, useInView } from 'motion/react' +import { useTheme } from 'next-themes' import Image from 'next/image' import React from 'react' -import { useTheme } from 'next-themes' -import { LazyMotion, domAnimation, m, useInView } from 'framer-motion' const OpenAIImage = ({ isHovered }: { isHovered: boolean }) => { const { resolvedTheme } = useTheme() diff --git a/apps/www/components/Products/VectorAI/PGvectorImg.tsx b/apps/www/components/Products/VectorAI/PGvectorImg.tsx index c7f21fdea3c..8d6cfc46590 100644 --- a/apps/www/components/Products/VectorAI/PGvectorImg.tsx +++ b/apps/www/components/Products/VectorAI/PGvectorImg.tsx @@ -1,5 +1,5 @@ import { DEFAULT_EASE } from '~/lib/animations' -import { domAnimation, LazyMotion, m } from 'framer-motion' +import { domAnimation, LazyMotion, m } from 'motion/react' import { useTheme } from 'next-themes' import React, { useEffect, useRef } from 'react' diff --git a/apps/www/components/Sections/CustomerQuotesSection.tsx b/apps/www/components/Sections/CustomerQuotesSection.tsx index 746258b53d7..4e606e8d7d8 100644 --- a/apps/www/components/Sections/CustomerQuotesSection.tsx +++ b/apps/www/components/Sections/CustomerQuotesSection.tsx @@ -1,8 +1,8 @@ import SectionContainer from '~/components/Layouts/SectionContainer' import CustomersVisual from '~/components/Products/VectorAI/CustomersVisual' import { getAnimation, INITIAL_BOTTOM } from '~/lib/animations' -import { domAnimation, LazyMotion, m, useInView } from 'framer-motion' import { ArrowUpRight } from 'lucide-react' +import { domAnimation, LazyMotion, m, useInView } from 'motion/react' import { useTheme } from 'next-themes' import Image from 'next/image' import Link from 'next/link' diff --git a/apps/www/components/Sections/FeaturesSection.tsx b/apps/www/components/Sections/FeaturesSection.tsx index 7951da6102e..a34f72b75c3 100644 --- a/apps/www/components/Sections/FeaturesSection.tsx +++ b/apps/www/components/Sections/FeaturesSection.tsx @@ -1,7 +1,7 @@ import SectionContainer from '~/components/Layouts/SectionContainer' import { getAnimation, INITIAL_BOTTOM } from '~/lib/animations' -import { domAnimation, LazyMotion, m, useInView } from 'framer-motion' import { ArrowUpRight } from 'lucide-react' +import { domAnimation, LazyMotion, m, useInView } from 'motion/react' import Link from 'next/link' import { ReactNode, useRef } from 'react' import ReactMarkdown from 'react-markdown' diff --git a/apps/www/components/Sections/HighlightCards.tsx b/apps/www/components/Sections/HighlightCards.tsx index 554ecd93462..07093b7d8b5 100644 --- a/apps/www/components/Sections/HighlightCards.tsx +++ b/apps/www/components/Sections/HighlightCards.tsx @@ -1,7 +1,7 @@ import SectionContainer from '~/components/Layouts/SectionContainer' import Panel from '~/components/Panel' import { getAnimation, INITIAL_BOTTOM } from '~/lib/animations' -import { domAnimation, LazyMotion, m, useInView } from 'framer-motion' +import { domAnimation, LazyMotion, m, useInView } from 'motion/react' import React, { useRef, useState } from 'react' interface Highlight { diff --git a/apps/www/components/Sections/TimedAccordionPanels.tsx b/apps/www/components/Sections/TimedAccordionPanels.tsx index 15e1c5973a8..1278b4fd884 100644 --- a/apps/www/components/Sections/TimedAccordionPanels.tsx +++ b/apps/www/components/Sections/TimedAccordionPanels.tsx @@ -1,7 +1,7 @@ import 'swiper/css' import { useBreakpoint } from 'common' -import { domAnimation, LazyMotion, m, useAnimation, useInView } from 'framer-motion' +import { domAnimation, LazyMotion, m, useAnimation, useInView } from 'motion/react' import React, { useEffect, useRef, useState } from 'react' import { Swiper, SwiperSlide } from 'swiper/react' import { cn } from 'ui' diff --git a/apps/www/components/Sections/TimedAccordionSection.tsx b/apps/www/components/Sections/TimedAccordionSection.tsx index acffd19388b..8c28a556883 100644 --- a/apps/www/components/Sections/TimedAccordionSection.tsx +++ b/apps/www/components/Sections/TimedAccordionSection.tsx @@ -1,7 +1,7 @@ import 'swiper/css' import { useBreakpoint } from 'common' -import { domAnimation, LazyMotion, m, useAnimation, useInView } from 'framer-motion' +import { domAnimation, LazyMotion, m, useAnimation, useInView } from 'motion/react' import React, { useEffect, useRef, useState, type ReactNode } from 'react' import { Swiper, SwiperSlide } from 'swiper/react' import { cn } from 'ui' diff --git a/apps/www/components/Sections/TimedTabsSection.tsx b/apps/www/components/Sections/TimedTabsSection.tsx index ef700dec426..0f250979622 100644 --- a/apps/www/components/Sections/TimedTabsSection.tsx +++ b/apps/www/components/Sections/TimedTabsSection.tsx @@ -2,8 +2,8 @@ import 'swiper/css' import CodeBlock from '~/components/CodeBlock/CodeBlock' import SectionContainer from '~/components/Layouts/SectionContainer' -import { AnimatePresence, motion, useAnimation } from 'framer-motion' import { ArrowUpRight } from 'lucide-react' +import { AnimatePresence, motion, useAnimation } from 'motion/react' import Image from 'next/image' import Link from 'next/link' import { useEffect, useState, type ReactNode } from 'react' diff --git a/apps/www/components/Sections/UseCasesSection.tsx b/apps/www/components/Sections/UseCasesSection.tsx index 1bf2ca9b202..14f1be19873 100644 --- a/apps/www/components/Sections/UseCasesSection.tsx +++ b/apps/www/components/Sections/UseCasesSection.tsx @@ -1,8 +1,8 @@ import SectionContainer from '~/components/Layouts/SectionContainer' import Panel from '~/components/Panel' import { getAnimation, INITIAL_BOTTOM } from '~/lib/animations' -import { domAnimation, LazyMotion, m, useInView } from 'framer-motion' import { ArrowUpRight } from 'lucide-react' +import { domAnimation, LazyMotion, m, useInView } from 'motion/react' import Link from 'next/link' import { ReactNode, useRef } from 'react' import { Button } from 'ui' diff --git a/apps/www/components/SurveyResults/SurveyChart.tsx b/apps/www/components/SurveyResults/SurveyChart.tsx index 4dbb2435996..715b0346136 100644 --- a/apps/www/components/SurveyResults/SurveyChart.tsx +++ b/apps/www/components/SurveyResults/SurveyChart.tsx @@ -2,8 +2,8 @@ import { createClient } from '@supabase/supabase-js' import CodeBlock from '~/components/CodeBlock/CodeBlock' -import { motion } from 'framer-motion' import { ChevronsUpDown } from 'lucide-react' +import { motion } from 'motion/react' import { useCallback, useEffect, useRef, useState } from 'react' import { Button, diff --git a/apps/www/components/TabsWithHighlights.tsx b/apps/www/components/TabsWithHighlights.tsx index 17ac3ddf7a0..7e300602d8b 100644 --- a/apps/www/components/TabsWithHighlights.tsx +++ b/apps/www/components/TabsWithHighlights.tsx @@ -1,5 +1,5 @@ -import { AnimatePresence, motion, useInView } from 'framer-motion' import { Check } from 'lucide-react' +import { AnimatePresence, motion, useInView } from 'motion/react' import { useTheme } from 'next-themes' import Link from 'next/link' import React, { useRef, useState } from 'react' diff --git a/apps/www/components/UsersGrowthChart.tsx b/apps/www/components/UsersGrowthChart.tsx index af92bc2139c..8551890c9e1 100644 --- a/apps/www/components/UsersGrowthChart.tsx +++ b/apps/www/components/UsersGrowthChart.tsx @@ -1,5 +1,5 @@ import { companyStats } from '~/data/company-stats' -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import { FC, useEffect, useMemo, useState } from 'react' import { useMedia } from 'react-use' import { AnimatedCounter, Badge, cn } from 'ui' diff --git a/apps/www/components/Wrapped/AnimatedGridBackground.tsx b/apps/www/components/Wrapped/AnimatedGridBackground.tsx index c6455ca32c8..59a9e6fc527 100644 --- a/apps/www/components/Wrapped/AnimatedGridBackground.tsx +++ b/apps/www/components/Wrapped/AnimatedGridBackground.tsx @@ -1,7 +1,8 @@ 'use client' -import { motion, useInView } from 'framer-motion' -import { useState, useEffect, useCallback, useMemo, useRef } from 'react' +import { motion, useInView } from 'motion/react' +import { useCallback, useEffect, useMemo, useRef, useState } from 'react' + import { Dots, Stripes } from './Visuals' const STAGGER_DELAY = 0.05 diff --git a/apps/www/components/Wrapped/Pages/Home.tsx b/apps/www/components/Wrapped/Pages/Home.tsx index 2be854ea4cc..d2f9ce05c5d 100644 --- a/apps/www/components/Wrapped/Pages/Home.tsx +++ b/apps/www/components/Wrapped/Pages/Home.tsx @@ -1,9 +1,10 @@ 'use client' -import { AnimatePresence, motion } from 'framer-motion' +import { useBreakpoint } from 'common' +import { AnimatePresence, motion } from 'motion/react' import { useEffect, useRef, useState } from 'react' import { cn } from 'ui' -import { useBreakpoint } from 'common' + import { AnimatedGridBackground } from '../AnimatedGridBackground' const stats = [ diff --git a/apps/www/components/Wrapped/Pages/Intro.tsx b/apps/www/components/Wrapped/Pages/Intro.tsx index cf28e509f4e..d3fefbc258a 100644 --- a/apps/www/components/Wrapped/Pages/Intro.tsx +++ b/apps/www/components/Wrapped/Pages/Intro.tsx @@ -1,11 +1,12 @@ 'use client' import * as Scrollytelling from '@bsmnt/scrollytelling' -import { useRef, useState, useEffect } from 'react' -import { motion, AnimatePresence, useInView } from 'framer-motion' -import { Dots, Stripes } from '../Visuals' +import { AnimatePresence, motion, useInView } from 'motion/react' +import { useEffect, useRef, useState } from 'react' import { cn } from 'ui' +import { Dots, Stripes } from '../Visuals' + const titles = [ 'Thank you to our community.', 'You created more Supabase databases in 2025 than in all previous years combined.', diff --git a/apps/www/components/Wrapped/Pages/SupabaseSelect.tsx b/apps/www/components/Wrapped/Pages/SupabaseSelect.tsx index 749237160db..7d4930210a1 100644 --- a/apps/www/components/Wrapped/Pages/SupabaseSelect.tsx +++ b/apps/www/components/Wrapped/Pages/SupabaseSelect.tsx @@ -1,8 +1,9 @@ 'use client' -import { AnimatePresence, motion, useInView } from 'framer-motion' +import { AnimatePresence, motion, useInView } from 'motion/react' import Image from 'next/image' import { useCallback, useEffect, useRef, useState } from 'react' + import { AnimatedGridBackground } from '../AnimatedGridBackground' // All available images from Supabase Select event diff --git a/apps/www/package.json b/apps/www/package.json index 3c2dd50222f..e7c007f6106 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -56,7 +56,6 @@ "dayjs": "^1.11.12", "dev-tools": "workspace:*", "eslint-config-supabase": "workspace:*", - "framer-motion": "^11.18.2", "globby": "^13.2.2", "gray-matter": "^4.0.3", "gsap": "^3.13.0", @@ -72,6 +71,7 @@ "mdast-util-to-markdown": "^1.5.0", "micromark-extension-gfm": "^2.0.3", "micromark-extension-mdxjs": "^1.0.1", + "motion": "catalog:", "next": "^15.5.24", "next-mdx-remote-client": "^1.1.7", "next-seo": "^6.5.0", diff --git a/apps/www/pages/assistant.tsx b/apps/www/pages/assistant.tsx index 024e834e94b..3c3f22d355b 100644 --- a/apps/www/pages/assistant.tsx +++ b/apps/www/pages/assistant.tsx @@ -2,7 +2,7 @@ import DotGrid from '~/components/AIDemo/DotGrid' import { AIDemoPanel } from '~/components/AIDemo/Panel' import { SqlSnippet } from '~/components/AIDemo/SqlSnippet' import { useIsLoggedIn, useIsUserLoading } from 'common' -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import { NextSeo } from 'next-seo' import dynamic from 'next/dynamic' import Link from 'next/link' diff --git a/apps/www/pages/customers.tsx b/apps/www/pages/customers.tsx index 3cb92c9dcb1..ae080c63a65 100644 --- a/apps/www/pages/customers.tsx +++ b/apps/www/pages/customers.tsx @@ -4,7 +4,7 @@ import { getSortedPosts } from '~/lib/posts' import { generateRss } from '~/lib/rss' import styles from '~/styles/customers.module.css' import type PostTypes from '~/types/post' -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import { NextSeo } from 'next-seo' import Head from 'next/head' import Link from 'next/link' diff --git a/apps/www/pages/features.tsx b/apps/www/pages/features.tsx index c7c892e89e3..e07032d1ca5 100644 --- a/apps/www/pages/features.tsx +++ b/apps/www/pages/features.tsx @@ -1,6 +1,6 @@ -import { motion } from 'framer-motion' import { debounce } from 'lib/helpers' import { LayoutGrid, Search, Table2 } from 'lucide-react' +import { motion } from 'motion/react' import { NextSeo } from 'next-seo' import { useRouter } from 'next/compat/router' import Head from 'next/head' diff --git a/apps/www/pages/state-of-startups-2025.tsx b/apps/www/pages/state-of-startups-2025.tsx index 1a34e53bee8..0ae9d8b838d 100644 --- a/apps/www/pages/state-of-startups-2025.tsx +++ b/apps/www/pages/state-of-startups-2025.tsx @@ -5,7 +5,7 @@ import { SurveyChapterSection } from '~/components/SurveyResults/SurveyChapterSe import { SurveySectionBreak } from '~/components/SurveyResults/SurveySectionBreak' import pageData from '~/data/surveys/state-of-startups-2025' import { useSendTelemetryEvent } from '~/lib/telemetry' -import { motion } from 'framer-motion' +import { motion } from 'motion/react' import { NextSeo } from 'next-seo' import Link from 'next/link' import { forwardRef, useEffect, useRef, useState } from 'react' diff --git a/packages/ui-patterns/package.json b/packages/ui-patterns/package.json index 47ad8e52f2b..c7a22c82323 100644 --- a/packages/ui-patterns/package.json +++ b/packages/ui-patterns/package.json @@ -766,7 +766,6 @@ "common": "workspace:*", "common-tags": "^1.8.2", "dayjs": "^1.11.13", - "framer-motion": "^11.18.2", "github-slugger": "^2.0.0", "highlightjs-curl": "^1.3.0", "icons": "workspace:*", @@ -777,6 +776,7 @@ "mdast-jsx": "^0.1.1", "mermaid": "^11.12.1", "monaco-editor": "*", + "motion": "catalog:", "next-themes": "catalog:", "openai": "^4.75.1", "prism-react-renderer": "^2.3.1", diff --git a/packages/ui-patterns/src/FilterBar/FilterBar.tsx b/packages/ui-patterns/src/FilterBar/FilterBar.tsx index 84cc0753af7..5bc4791b30c 100644 --- a/packages/ui-patterns/src/FilterBar/FilterBar.tsx +++ b/packages/ui-patterns/src/FilterBar/FilterBar.tsx @@ -1,7 +1,7 @@ 'use client' -import { motion } from 'framer-motion' import { Search } from 'lucide-react' +import { motion } from 'motion/react' import React, { forwardRef } from 'react' import { cn } from 'ui' diff --git a/packages/ui-patterns/src/SqlToRest/syntax-highlighter/framer-features.ts b/packages/ui-patterns/src/SqlToRest/syntax-highlighter/framer-features.ts index e0013ea7cd5..3feb81ce3bd 100644 --- a/packages/ui-patterns/src/SqlToRest/syntax-highlighter/framer-features.ts +++ b/packages/ui-patterns/src/SqlToRest/syntax-highlighter/framer-features.ts @@ -1,3 +1,3 @@ -import { domMax } from 'framer-motion' +import { domMax } from 'motion/react' export default domMax diff --git a/packages/ui-patterns/src/SqlToRest/syntax-highlighter/transform-renderer.tsx b/packages/ui-patterns/src/SqlToRest/syntax-highlighter/transform-renderer.tsx index 3dac2d54b1f..0bdec6b311a 100644 --- a/packages/ui-patterns/src/SqlToRest/syntax-highlighter/transform-renderer.tsx +++ b/packages/ui-patterns/src/SqlToRest/syntax-highlighter/transform-renderer.tsx @@ -1,4 +1,4 @@ -import { LazyMotion, m } from 'framer-motion' +import { LazyMotion, m } from 'motion/react' import React, { PropsWithChildren } from 'react' import { createElement, SyntaxHighlighterProps } from 'react-syntax-highlighter' diff --git a/packages/ui/package.json b/packages/ui/package.json index 7f1db51b2d8..b18c4c7e003 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -22,10 +22,10 @@ "cmdk": "^1.1.1", "color": "^4.2.3", "date-fns": "^2.30.0", - "framer-motion": "^11.18.2", "input-otp": "^1.4.2", "lodash": "catalog:", "lucide-react": "^0.436.0", + "motion": "catalog:", "prop-types": "^15.7.2", "radix-ui": "catalog:", "react": "catalog:", diff --git a/packages/ui/src/components/AnimatedCounter/AnimatedCounter.tsx b/packages/ui/src/components/AnimatedCounter/AnimatedCounter.tsx index b50199fbcb2..0fe178f7df0 100644 --- a/packages/ui/src/components/AnimatedCounter/AnimatedCounter.tsx +++ b/packages/ui/src/components/AnimatedCounter/AnimatedCounter.tsx @@ -1,6 +1,6 @@ 'use client' -import { animate, motion, useInView, useMotionValue, useTransform } from 'framer-motion' +import { animate, motion, useInView, useMotionValue, useTransform } from 'motion/react' import { FC, useEffect, useRef } from 'react' import { cn } from '../../lib/utils/cn' diff --git a/packages/ui/src/components/shadcn/ui/form.tsx b/packages/ui/src/components/shadcn/ui/form.tsx index f1bfd096cbb..0accbb37719 100644 --- a/packages/ui/src/components/shadcn/ui/form.tsx +++ b/packages/ui/src/components/shadcn/ui/form.tsx @@ -1,6 +1,6 @@ 'use client' -import { AnimatePresence, motion } from 'framer-motion' +import { AnimatePresence, motion } from 'motion/react' import { Label as LabelPrimitive, Slot as SlotPrimitive } from 'radix-ui' import * as React from 'react' import { diff --git a/packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx b/packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx index c4bbbf51ca6..0d73ebefab1 100644 --- a/packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx +++ b/packages/ui/src/layout/ai-icon-animation/ai-icon-animation.tsx @@ -1,6 +1,6 @@ 'use client' -import { motion, useMotionValue, useSpring } from 'framer-motion' +import { motion, useMotionValue, useSpring } from 'motion/react' import { memo, useRef, useState } from 'react' import { cn } from '../../lib/utils' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index daa119338a4..417869d4686 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -63,6 +63,9 @@ catalogs: cn: specifier: ^0.4.0 version: 0.4.0 + motion: + specifier: ^11.18.2 + version: 11.18.2 next: specifier: ^16.3.6 version: 16.3.6 @@ -416,9 +419,6 @@ importers: eslint-config-supabase: specifier: workspace:* version: link:../../packages/eslint-config-supabase - framer-motion: - specifier: ^11.18.2 - version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) github-slugger: specifier: ^2.0.0 version: 2.0.0 @@ -491,6 +491,9 @@ importers: micromark-extension-mdxjs: specifier: ^1.0.0 version: 1.0.1 + motion: + specifier: 'catalog:' + version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) next: specifier: ^15.5.24 version: 15.5.25(@babel/core@7.29.7(supports-color@8.1.1))(@opentelemetry/api@1.9.1)(@playwright/test@1.59.1)(@types/node@22.13.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(sass@1.77.4) @@ -841,15 +844,15 @@ importers: common: specifier: workspace:* version: link:../../packages/common - framer-motion: - specifier: ^11.18.2 - version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) jotai: specifier: ^2.8.0 version: 2.8.1(@types/react@19.2.14)(react@19.2.6) lucide-react: specifier: '*' version: 0.511.0(react@19.2.6) + motion: + specifier: 'catalog:' + version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) next: specifier: 'catalog:' version: 16.3.6(@babel/core@7.29.7(supports-color@8.1.1))(@opentelemetry/api@1.9.1)(@playwright/test@1.59.1)(@types/node@22.13.14)(babel-plugin-macros@3.1.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(sass@1.77.4) @@ -1212,9 +1215,6 @@ importers: file-saver: specifier: ^2.0.5 version: 2.0.5 - framer-motion: - specifier: ^11.18.2 - version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) fuse.js: specifier: ^7.4.0 version: 7.4.0 @@ -1269,6 +1269,9 @@ importers: monaco-editor: specifier: 0.52.2 version: 0.52.2 + motion: + specifier: 'catalog:' + version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) next: specifier: 'catalog:' version: 16.3.6(@babel/core@7.29.7(supports-color@8.1.1))(@opentelemetry/api@1.9.1)(@playwright/test@1.59.1)(@types/node@22.13.14)(babel-plugin-macros@3.1.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(sass@1.77.4) @@ -1600,9 +1603,6 @@ importers: eslint-config-supabase: specifier: workspace:* version: link:../../packages/eslint-config-supabase - framer-motion: - specifier: ^11.18.2 - version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) icons: specifier: workspace:* version: link:../../packages/icons @@ -1615,6 +1615,9 @@ importers: monaco-editor: specifier: 0.52.2 version: 0.52.2 + motion: + specifier: 'catalog:' + version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) next: specifier: 'catalog:' version: 16.3.6(@babel/core@7.29.7(supports-color@8.1.1))(@opentelemetry/api@1.9.1)(@playwright/test@1.59.1)(@types/node@22.13.14)(babel-plugin-macros@3.1.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(sass@1.77.4) @@ -1904,9 +1907,6 @@ importers: eslint-config-supabase: specifier: workspace:* version: link:../../packages/eslint-config-supabase - framer-motion: - specifier: ^11.18.2 - version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) globby: specifier: ^13.2.2 version: 13.2.2 @@ -1952,6 +1952,9 @@ importers: micromark-extension-mdxjs: specifier: ^1.0.1 version: 1.0.1 + motion: + specifier: 'catalog:' + version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) next: specifier: ^15.5.24 version: 15.5.25(@babel/core@7.29.7(supports-color@8.1.1))(@opentelemetry/api@1.9.1)(@playwright/test@1.59.1)(@types/node@24.19.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(sass@1.77.4) @@ -2748,9 +2751,6 @@ importers: date-fns: specifier: ^2.30.0 version: 2.30.0 - framer-motion: - specifier: ^11.18.2 - version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) input-otp: specifier: ^1.4.2 version: 1.4.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6) @@ -2760,6 +2760,9 @@ importers: lucide-react: specifier: ^0.436.0 version: 0.436.0(react@19.2.6) + motion: + specifier: 'catalog:' + version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) prop-types: specifier: ^15.7.2 version: 15.8.1 @@ -2890,9 +2893,6 @@ importers: dayjs: specifier: ^1.11.13 version: 1.11.13 - framer-motion: - specifier: ^11.18.2 - version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) github-slugger: specifier: ^2.0.0 version: 2.0.0 @@ -2923,6 +2923,9 @@ importers: monaco-editor: specifier: 0.52.2 version: 0.52.2 + motion: + specifier: 'catalog:' + version: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) next: specifier: 'catalog:' version: 16.3.6(@babel/core@7.29.7(supports-color@8.1.1))(@opentelemetry/api@1.9.1)(@playwright/test@1.59.1)(@types/node@22.13.14)(babel-plugin-macros@3.1.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(sass@1.77.4) @@ -14896,6 +14899,20 @@ packages: motion-utils@12.9.4: resolution: {integrity: sha512-BW3I65zeM76CMsfh3kHid9ansEJk9Qvl+K5cu4DVHKGsI52n76OJ4z2CUJUV+Mn3uEP9k1JJA3tClG0ggSrRcg==} + motion@11.18.2: + resolution: {integrity: sha512-JLjvFDuFr42NFtcVoMAyC2sEjnpA8xpy6qWPyzQvCloznAyQ8FIXioxWfHiLtgYhoVpfUqSWpn1h9++skj9+Wg==} + peerDependencies: + '@emotion/is-prop-valid': '*' + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@emotion/is-prop-valid': + optional: true + react: + optional: true + react-dom: + optional: true + mri@1.2.0: resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==} engines: {node: '>=4'} @@ -33544,6 +33561,15 @@ snapshots: motion-utils@12.9.4: {} + motion@11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6): + dependencies: + framer-motion: 11.18.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) + tslib: 2.8.1 + optionalDependencies: + '@emotion/is-prop-valid': 1.4.0 + react: 19.2.6 + react-dom: 19.2.6(react@19.2.6) + mri@1.2.0: {} mrmime@2.0.1: {} diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index f3fd62613ac..e918b6a3279 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -38,6 +38,7 @@ catalog: lodash: ^4.18.1 lodash-es: ^4.18.1 monaco-editor: 0.52.2 + motion: ^11.18.2 next: ^16.3.6 next-themes: ^0.4.6 postcss: ^8.5.18