From a1a6235f1b92c3f4b25b521c4009f63d14428f4e Mon Sep 17 00:00:00 2001 From: SerhiiTsybulskyi Date: Thu, 16 Jan 2025 12:50:17 +0200 Subject: [PATCH] upgrade framer --- docs/blocks/administration/Billing.story.tsx | 2 +- docs/blocks/administration/Pricing.story.tsx | 2 +- docs/blocks/administration/Profile.story.tsx | 2 +- docs/blocks/administration/Team.story.tsx | 2 +- .../authentication/ForgotPassword.story.tsx | 2 +- docs/blocks/authentication/Login.story.tsx | 2 +- docs/blocks/authentication/Mfa.story.tsx | 2 +- docs/blocks/authentication/Register.story.tsx | 2 +- docs/blocks/foundation/EmptyState.story.tsx | 2 +- docs/blocks/foundation/Support.story.tsx | 2 +- docs/blocks/foundation/Timeline.story.tsx | 2 +- package-lock.json | 70 +++++++++++++++++++ package.json | 2 +- src/data/Sort/Sort.tsx | 2 +- src/elements/Avatar/Avatar.story.tsx | 2 +- src/elements/Badge/Badge.tsx | 2 +- src/elements/Button/Button.tsx | 2 +- src/elements/Loader/DotsLoader.tsx | 2 +- src/form/Calendar/Calendar.tsx | 2 +- .../Calendar/CalendarDays/CalendarDays.tsx | 2 +- src/form/Calendar/CalendarRange.tsx | 2 +- .../Calendar/CalendarYears/CalendarYears.tsx | 2 +- src/form/Checkbox/Checkbox.tsx | 2 +- src/form/Radio/Radio.tsx | 2 +- src/form/Range/RangeDouble.tsx | 2 +- src/form/Range/RangeSingle.tsx | 2 +- src/form/Range/RangeTooltip.tsx | 2 +- src/form/Select/SelectMenu/SelectMenu.tsx | 2 +- src/form/Toggle/Toggle.tsx | 2 +- src/layers/Backdrop/Backdrop.tsx | 2 +- src/layers/ContextMenu/ContextMenu.tsx | 2 +- src/layers/Dialog/Dialog.story.tsx | 2 +- src/layers/Dialog/Dialog.tsx | 2 +- src/layers/Drawer/Drawer.tsx | 2 +- src/layers/Menu/Menu.tsx | 2 +- src/layers/Notification/Notification.tsx | 2 +- src/layers/Notification/Notifications.tsx | 2 +- src/layers/Tooltip/Tooltip.tsx | 2 +- src/layout/Collapse/Collapse.tsx | 2 +- src/layout/Motion/MotionGroup.tsx | 2 +- src/layout/Motion/MotionItem.tsx | 2 +- src/layout/Tabs/Tab.tsx | 2 +- src/layout/Tabs/Tabs.tsx | 2 +- .../ConnectedOverlay.story.tsx | 2 +- .../ConnectedOverlay/ConnectedOverlay.tsx | 2 +- .../GlobalOverlay/GlobalOverlay.story.tsx | 2 +- .../Overlay/GlobalOverlay/GlobalOverlay.tsx | 2 +- 47 files changed, 116 insertions(+), 46 deletions(-) diff --git a/docs/blocks/administration/Billing.story.tsx b/docs/blocks/administration/Billing.story.tsx index 96ef5919..c45cc2b3 100644 --- a/docs/blocks/administration/Billing.story.tsx +++ b/docs/blocks/administration/Billing.story.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import { Card } from '../../../src/layout/Card'; import { diff --git a/docs/blocks/administration/Pricing.story.tsx b/docs/blocks/administration/Pricing.story.tsx index e3a85a3c..68cd5828 100644 --- a/docs/blocks/administration/Pricing.story.tsx +++ b/docs/blocks/administration/Pricing.story.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import { toggleTheme, Toggle } from '../../../src/form/Toggle'; import { radioTheme, Radio } from '../../../src/form/Radio'; diff --git a/docs/blocks/administration/Profile.story.tsx b/docs/blocks/administration/Profile.story.tsx index a57f92a1..9e0fb967 100644 --- a/docs/blocks/administration/Profile.story.tsx +++ b/docs/blocks/administration/Profile.story.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import { Block, diff --git a/docs/blocks/administration/Team.story.tsx b/docs/blocks/administration/Team.story.tsx index 0e2c7f01..ed375ac6 100644 --- a/docs/blocks/administration/Team.story.tsx +++ b/docs/blocks/administration/Team.story.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import { Card } from '../../../src/layout/Card'; import { Tabs, Tab, TabList, TabPanel } from '../../../src/layout/Tabs'; diff --git a/docs/blocks/authentication/ForgotPassword.story.tsx b/docs/blocks/authentication/ForgotPassword.story.tsx index 7496aa56..66f1bc59 100644 --- a/docs/blocks/authentication/ForgotPassword.story.tsx +++ b/docs/blocks/authentication/ForgotPassword.story.tsx @@ -1,4 +1,4 @@ -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import React from 'react'; import { Controller, useForm } from 'react-hook-form'; import { Block, Card, Divider, Stack } from '../../../src/layout'; diff --git a/docs/blocks/authentication/Login.story.tsx b/docs/blocks/authentication/Login.story.tsx index b811866c..7a45bf93 100644 --- a/docs/blocks/authentication/Login.story.tsx +++ b/docs/blocks/authentication/Login.story.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Controller, useForm } from 'react-hook-form'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import { Block, Card, Divider, Stack } from '../../../src/layout'; import { Checkbox, Input } from '../../../src/form'; diff --git a/docs/blocks/authentication/Mfa.story.tsx b/docs/blocks/authentication/Mfa.story.tsx index bb1cf182..41fc3a5d 100644 --- a/docs/blocks/authentication/Mfa.story.tsx +++ b/docs/blocks/authentication/Mfa.story.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import { Block } from '../../../src/layout/Block'; import { Button } from '../../../src/elements/Button'; diff --git a/docs/blocks/authentication/Register.story.tsx b/docs/blocks/authentication/Register.story.tsx index aeab2c1f..37bac3b3 100644 --- a/docs/blocks/authentication/Register.story.tsx +++ b/docs/blocks/authentication/Register.story.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import { useForm, Controller } from 'react-hook-form'; import { Block } from '../../../src/layout/Block'; diff --git a/docs/blocks/foundation/EmptyState.story.tsx b/docs/blocks/foundation/EmptyState.story.tsx index e8de4da4..147f3dd0 100644 --- a/docs/blocks/foundation/EmptyState.story.tsx +++ b/docs/blocks/foundation/EmptyState.story.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import { Card, Divider } from '../../../src/layout'; import { Button } from '../../../src/elements/Button'; import { Input } from '../../../src/form/Input'; diff --git a/docs/blocks/foundation/Support.story.tsx b/docs/blocks/foundation/Support.story.tsx index b467e3df..36094436 100644 --- a/docs/blocks/foundation/Support.story.tsx +++ b/docs/blocks/foundation/Support.story.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import { Controller, useForm } from 'react-hook-form'; import { Block, Card } from '../../../src/layout'; diff --git a/docs/blocks/foundation/Timeline.story.tsx b/docs/blocks/foundation/Timeline.story.tsx index a4bde5de..3c59674c 100644 --- a/docs/blocks/foundation/Timeline.story.tsx +++ b/docs/blocks/foundation/Timeline.story.tsx @@ -1,4 +1,4 @@ -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import React from 'react'; import { Avatar, diff --git a/package-lock.json b/package-lock.json index 271ec1eb..ee89b6d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "framer-motion": "^10.16.16", "fuse.js": "^6.6.2", "human-format": "^1.2.0", + "motion": "^11.18.0", "name-initials": "^0.1.3", "pluralize": "^8.0.0", "react-fast-compare": "^3.2.2", @@ -14456,6 +14457,75 @@ "node": ">=0.4.0" } }, + "node_modules/motion": { + "version": "11.18.0", + "resolved": "https://registry.npmjs.org/motion/-/motion-11.18.0.tgz", + "integrity": "sha512-uJ4zNXh/4K9C5wftxHKlXLHC0Rc9dHSHPyO1P6T9XE2bTn2z8C2lOZX/M8vAmFp0gtJTJ3aYkv44lTtJSfv6+A==", + "dependencies": { + "framer-motion": "^11.18.0", + "tslib": "^2.4.0" + }, + "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 + } + } + }, + "node_modules/motion-dom": { + "version": "11.16.4", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.16.4.tgz", + "integrity": "sha512-2wuCie206pCiP2K23uvwJeci4pMFfyQKpWI0Vy6HrCTDzDCer4TsYtT7IVnuGbDeoIV37UuZiUr6SZMHEc1Vww==", + "dependencies": { + "motion-utils": "^11.16.0" + } + }, + "node_modules/motion-utils": { + "version": "11.16.0", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.16.0.tgz", + "integrity": "sha512-ngdWPjg31rD4WGXFi0eZ00DQQqKKu04QExyv/ymlC+3k+WIgYVFbt6gS5JsFPbJODTF/r8XiE/X+SsoT9c0ocw==" + }, + "node_modules/motion/node_modules/framer-motion": { + "version": "11.18.0", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.18.0.tgz", + "integrity": "sha512-Vmjl5Al7XqKHzDFnVqzi1H9hzn5w4eN/bdqXTymVpU2UuMQuz9w6UPdsL9dFBeH7loBlnu4qcEXME+nvbkcIOw==", + "dependencies": { + "motion-dom": "^11.16.4", + "motion-utils": "^11.16.0", + "tslib": "^2.4.0" + }, + "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 + } + } + }, + "node_modules/motion/node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==" + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", diff --git a/package.json b/package.json index efab46b2..a9d1f765 100644 --- a/package.json +++ b/package.json @@ -71,9 +71,9 @@ "date-fns": "^3.6.0", "ellipsize": "^0.5.1", "focus-trap-react": "^10.2.3", - "framer-motion": "^10.16.16", "fuse.js": "^6.6.2", "human-format": "^1.2.0", + "motion": "^11.18.0", "name-initials": "^0.1.3", "pluralize": "^8.0.0", "react-fast-compare": "^3.2.2", diff --git a/src/data/Sort/Sort.tsx b/src/data/Sort/Sort.tsx index fbe85a18..70be19c4 100644 --- a/src/data/Sort/Sort.tsx +++ b/src/data/Sort/Sort.tsx @@ -1,5 +1,5 @@ import React, { FC, PropsWithChildren, useCallback } from 'react'; -import { AnimatePresence, motion } from 'framer-motion'; +import { AnimatePresence, motion } from 'motion/react'; import { DownArrowIcon } from './DownArrowIcon'; import { getNextDirection, SortDirection } from './utils'; import { twMerge } from 'tailwind-merge'; diff --git a/src/elements/Avatar/Avatar.story.tsx b/src/elements/Avatar/Avatar.story.tsx index 74359b57..985f2c7b 100644 --- a/src/elements/Avatar/Avatar.story.tsx +++ b/src/elements/Avatar/Avatar.story.tsx @@ -26,7 +26,7 @@ Outline.args = { export const RoundedWithImage = Template.bind({}); RoundedWithImage.args = { - src: 'https://goodcode.us/static/austin-d1a2c5249336c31662b8ee6d4e169b2b.jpg', + src: 'https://i.pravatar.cc/128', size: 50, rounded: true }; diff --git a/src/elements/Badge/Badge.tsx b/src/elements/Badge/Badge.tsx index 3e603b74..f5e44bb4 100644 --- a/src/elements/Badge/Badge.tsx +++ b/src/elements/Badge/Badge.tsx @@ -1,5 +1,5 @@ import React, { FC, forwardRef, LegacyRef } from 'react'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import { BadgeTheme } from './BadgeTheme'; import { useComponentTheme } from '@/utils'; import { twMerge } from 'tailwind-merge'; diff --git a/src/elements/Button/Button.tsx b/src/elements/Button/Button.tsx index b34e9e9c..e37032d7 100644 --- a/src/elements/Button/Button.tsx +++ b/src/elements/Button/Button.tsx @@ -1,5 +1,5 @@ import React, { FC, forwardRef, LegacyRef, useContext } from 'react'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import { ButtonGroupContext } from './ButtonGroupContext'; import { useComponentTheme } from '@/utils'; import { twMerge } from 'tailwind-merge'; diff --git a/src/elements/Loader/DotsLoader.tsx b/src/elements/Loader/DotsLoader.tsx index c9ca6b40..9dd50744 100644 --- a/src/elements/Loader/DotsLoader.tsx +++ b/src/elements/Loader/DotsLoader.tsx @@ -1,5 +1,5 @@ import React, { FC } from 'react'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import { DotsLoaderTheme } from './DotsLoaderTheme'; import { useComponentTheme } from '@/utils'; import { twMerge } from 'tailwind-merge'; diff --git a/src/form/Calendar/Calendar.tsx b/src/form/Calendar/Calendar.tsx index fcd60d33..9a1560ce 100644 --- a/src/form/Calendar/Calendar.tsx +++ b/src/form/Calendar/Calendar.tsx @@ -1,4 +1,4 @@ -import { AnimatePresence, motion } from 'framer-motion'; +import { AnimatePresence, motion } from 'motion/react'; import React, { FC, useCallback, useMemo, useState } from 'react'; import { Button } from '@/elements/Button'; import { diff --git a/src/form/Calendar/CalendarDays/CalendarDays.tsx b/src/form/Calendar/CalendarDays/CalendarDays.tsx index 7db689ac..3035ea75 100644 --- a/src/form/Calendar/CalendarDays/CalendarDays.tsx +++ b/src/form/Calendar/CalendarDays/CalendarDays.tsx @@ -8,7 +8,7 @@ import { isNextWeekEmpty, isPreviousWeekEmpty } from '@/form/Calendar/utils'; -import { AnimatePresence, motion } from 'framer-motion'; +import { AnimatePresence, motion } from 'motion/react'; import { cn, useComponentTheme } from '@/utils'; import { CalendarTheme } from '@/form/Calendar/CalendarTheme'; import { twMerge } from 'tailwind-merge'; diff --git a/src/form/Calendar/CalendarRange.tsx b/src/form/Calendar/CalendarRange.tsx index d87c1c50..4e345158 100644 --- a/src/form/Calendar/CalendarRange.tsx +++ b/src/form/Calendar/CalendarRange.tsx @@ -7,7 +7,7 @@ import { sub, format } from 'date-fns'; -import { AnimatePresence, motion } from 'framer-motion'; +import { AnimatePresence, motion } from 'motion/react'; import { Button } from '@/elements'; import { CalendarProps } from './Calendar'; import { CalendarDays } from './CalendarDays'; diff --git a/src/form/Calendar/CalendarYears/CalendarYears.tsx b/src/form/Calendar/CalendarYears/CalendarYears.tsx index 066e3363..a3c96c87 100644 --- a/src/form/Calendar/CalendarYears/CalendarYears.tsx +++ b/src/form/Calendar/CalendarYears/CalendarYears.tsx @@ -1,5 +1,5 @@ import React, { FC, useMemo } from 'react'; -import { AnimatePresence, motion } from 'framer-motion'; +import { AnimatePresence, motion } from 'motion/react'; import { Button } from '@/elements'; import { cn, useComponentTheme } from '@/utils'; import { CalendarTheme } from '@/form/Calendar/CalendarTheme'; diff --git a/src/form/Checkbox/Checkbox.tsx b/src/form/Checkbox/Checkbox.tsx index 373ae6ce..cd47b997 100644 --- a/src/form/Checkbox/Checkbox.tsx +++ b/src/form/Checkbox/Checkbox.tsx @@ -5,7 +5,7 @@ import React, { ReactNode, useCallback } from 'react'; -import { motion, useMotionValue, useTransform } from 'framer-motion'; +import { motion, useMotionValue, useTransform } from 'motion/react'; import { twMerge } from 'tailwind-merge'; import { CheckboxTheme } from './CheckboxTheme'; import { useComponentTheme } from '@/utils'; diff --git a/src/form/Radio/Radio.tsx b/src/form/Radio/Radio.tsx index d8566f1d..58d51871 100644 --- a/src/form/Radio/Radio.tsx +++ b/src/form/Radio/Radio.tsx @@ -6,7 +6,7 @@ import React, { useContext, useMemo } from 'react'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import { RadioGroupContext } from './RadioGroupContext'; import { cn, useComponentTheme } from '@/utils'; import { RadioTheme } from './RadioTheme'; diff --git a/src/form/Range/RangeDouble.tsx b/src/form/Range/RangeDouble.tsx index fbdfd9bb..3ccb29cb 100644 --- a/src/form/Range/RangeDouble.tsx +++ b/src/form/Range/RangeDouble.tsx @@ -7,7 +7,7 @@ import React, { useMemo, useLayoutEffect } from 'react'; -import { motion, useMotionValue } from 'framer-motion'; +import { motion, useMotionValue } from 'motion/react'; import { RangeProps, RangeTooltip } from './RangeTooltip'; import { twMerge } from 'tailwind-merge'; import { cn, useComponentTheme } from '@/utils'; diff --git a/src/form/Range/RangeSingle.tsx b/src/form/Range/RangeSingle.tsx index d0d2d5b7..2d86679b 100644 --- a/src/form/Range/RangeSingle.tsx +++ b/src/form/Range/RangeSingle.tsx @@ -6,7 +6,7 @@ import React, { FC, useMemo } from 'react'; -import { motion, useMotionValue } from 'framer-motion'; +import { motion, useMotionValue } from 'motion/react'; import { RangeProps, RangeTooltip } from './RangeTooltip'; import { twMerge } from 'tailwind-merge'; import { cn, useComponentTheme } from '@/utils'; diff --git a/src/form/Range/RangeTooltip.tsx b/src/form/Range/RangeTooltip.tsx index 7a6baca3..b978b589 100644 --- a/src/form/Range/RangeTooltip.tsx +++ b/src/form/Range/RangeTooltip.tsx @@ -1,5 +1,5 @@ import React, { FC } from 'react'; -import { AnimatePresence, motion } from 'framer-motion'; +import { AnimatePresence, motion } from 'motion/react'; import { RangeTheme } from './RangeTheme'; import { useComponentTheme } from '@/utils'; diff --git a/src/form/Select/SelectMenu/SelectMenu.tsx b/src/form/Select/SelectMenu/SelectMenu.tsx index 30170ebf..d920c046 100644 --- a/src/form/Select/SelectMenu/SelectMenu.tsx +++ b/src/form/Select/SelectMenu/SelectMenu.tsx @@ -1,5 +1,5 @@ import React, { FC, Fragment, useCallback } from 'react'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import { SelectOptionProps, SelectValue } from '@/form/Select/SelectOption'; import Highlighter from 'react-highlight-words'; import { GroupOptions, GroupOption } from '@/form/Select/utils'; diff --git a/src/form/Toggle/Toggle.tsx b/src/form/Toggle/Toggle.tsx index e5d51154..a5a7a597 100644 --- a/src/form/Toggle/Toggle.tsx +++ b/src/form/Toggle/Toggle.tsx @@ -1,5 +1,5 @@ import React, { FC, forwardRef, LegacyRef } from 'react'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import { ToggleTheme } from './ToggleTheme'; import { cn, useComponentTheme } from '@/utils'; diff --git a/src/layers/Backdrop/Backdrop.tsx b/src/layers/Backdrop/Backdrop.tsx index 2512beef..cd4b428f 100644 --- a/src/layers/Backdrop/Backdrop.tsx +++ b/src/layers/Backdrop/Backdrop.tsx @@ -1,5 +1,5 @@ import React, { FC, MouseEvent } from 'react'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import { cn, useComponentTheme } from '@/utils'; import { BackdropTheme } from './BackdropTheme'; diff --git a/src/layers/ContextMenu/ContextMenu.tsx b/src/layers/ContextMenu/ContextMenu.tsx index cfbe5534..016f6e4e 100644 --- a/src/layers/ContextMenu/ContextMenu.tsx +++ b/src/layers/ContextMenu/ContextMenu.tsx @@ -1,5 +1,5 @@ import React, { FC, ReactNode, useState, useCallback, useEffect } from 'react'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import { ConnectedOverlay, ConnectedOverlayProps } from '@/utils'; import { useId } from '@/utils'; import FocusTrap from 'focus-trap-react'; diff --git a/src/layers/Dialog/Dialog.story.tsx b/src/layers/Dialog/Dialog.story.tsx index 1c128c5b..d9ad8d5b 100644 --- a/src/layers/Dialog/Dialog.story.tsx +++ b/src/layers/Dialog/Dialog.story.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { MotionProps } from 'framer-motion'; +import { MotionProps } from 'motion/react'; import { Dialog } from './Dialog'; import { useDialog } from './useDialog'; import { Button } from '../../elements'; diff --git a/src/layers/Dialog/Dialog.tsx b/src/layers/Dialog/Dialog.tsx index f01c4e4f..ea0d3980 100644 --- a/src/layers/Dialog/Dialog.tsx +++ b/src/layers/Dialog/Dialog.tsx @@ -3,7 +3,7 @@ import classNames from 'classnames'; import { GlobalOverlay, GlobalOverlayProps } from '@/utils/Overlay'; import { useId, CloneElement } from '@/utils'; import FocusTrap from 'focus-trap-react'; -import { motion, MotionProps } from 'framer-motion'; +import { motion, MotionProps } from 'motion/react'; import { twMerge } from 'tailwind-merge'; import { DialogHeader, DialogHeaderProps } from './DialogHeader'; import { useComponentTheme } from '@/utils'; diff --git a/src/layers/Drawer/Drawer.tsx b/src/layers/Drawer/Drawer.tsx index eec5d7e3..1a4b43c8 100644 --- a/src/layers/Drawer/Drawer.tsx +++ b/src/layers/Drawer/Drawer.tsx @@ -2,7 +2,7 @@ import React, { FC, ReactElement } from 'react'; import FocusTrap from 'focus-trap-react'; import { useId, CloneElement } from '@/utils'; import { GlobalOverlay, GlobalOverlayProps } from '@/utils/Overlay'; -import { motion, MotionProps } from 'framer-motion'; +import { motion, MotionProps } from 'motion/react'; import { variants } from './variants'; import { DrawerHeader, DrawerHeaderProps } from './DrawerHeader'; import { twMerge } from 'tailwind-merge'; diff --git a/src/layers/Menu/Menu.tsx b/src/layers/Menu/Menu.tsx index 5a2efb0d..72788013 100644 --- a/src/layers/Menu/Menu.tsx +++ b/src/layers/Menu/Menu.tsx @@ -4,7 +4,7 @@ import { MiddlewareState, size } from '@floating-ui/react'; import { ConnectedOverlay, OverlayEvent } from '@/utils/Overlay'; import { Modifiers, Placement } from '@/utils/Position'; import { useId } from '@/utils'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import { twMerge } from 'tailwind-merge'; import { MenuTheme } from './MenuTheme'; import { useComponentTheme } from '@/utils'; diff --git a/src/layers/Notification/Notification.tsx b/src/layers/Notification/Notification.tsx index c762e68b..6ab07547 100644 --- a/src/layers/Notification/Notification.tsx +++ b/src/layers/Notification/Notification.tsx @@ -1,6 +1,6 @@ import React, { FC, ReactNode, useCallback, useEffect, useRef } from 'react'; import { NotificationOptions } from './NotificationsContext'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import { twMerge } from 'tailwind-merge'; import { NotificationTheme } from './NotificationTheme'; import { useComponentTheme } from '@/utils'; diff --git a/src/layers/Notification/Notifications.tsx b/src/layers/Notification/Notifications.tsx index 80ee6b27..d4910ef9 100644 --- a/src/layers/Notification/Notifications.tsx +++ b/src/layers/Notification/Notifications.tsx @@ -7,7 +7,7 @@ import React, { useMemo, JSXElementConstructor } from 'react'; -import { AnimatePresence, motion } from 'framer-motion'; +import { AnimatePresence, motion } from 'motion/react'; import { twMerge } from 'tailwind-merge'; import { Notification } from './Notification'; diff --git a/src/layers/Tooltip/Tooltip.tsx b/src/layers/Tooltip/Tooltip.tsx index e142d91d..7d5f84dc 100644 --- a/src/layers/Tooltip/Tooltip.tsx +++ b/src/layers/Tooltip/Tooltip.tsx @@ -1,7 +1,7 @@ import React, { FC, useState, useRef, useEffect, ReactNode } from 'react'; import { ConnectedOverlay, TriggerTypes } from '@/utils/Overlay'; import { Modifiers, Placement, ReferenceObject } from '@/utils/Position'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import { twMerge } from 'tailwind-merge'; import { useTooltipState } from './useTooltipState'; import { TooltipTheme } from './TooltipTheme'; diff --git a/src/layout/Collapse/Collapse.tsx b/src/layout/Collapse/Collapse.tsx index 3bf50ec0..112cce70 100644 --- a/src/layout/Collapse/Collapse.tsx +++ b/src/layout/Collapse/Collapse.tsx @@ -1,5 +1,5 @@ import React, { FC } from 'react'; -import { motion, AnimatePresence } from 'framer-motion'; +import { motion, AnimatePresence } from 'motion/react'; import { CollapseTheme } from './CollapseTheme'; import { useComponentTheme } from '@/utils'; import { twMerge } from 'tailwind-merge'; diff --git a/src/layout/Motion/MotionGroup.tsx b/src/layout/Motion/MotionGroup.tsx index f34b59fb..459ee5ee 100644 --- a/src/layout/Motion/MotionGroup.tsx +++ b/src/layout/Motion/MotionGroup.tsx @@ -1,5 +1,5 @@ import React, { FC, ReactNode } from 'react'; -import { HTMLMotionProps, motion } from 'framer-motion'; +import { HTMLMotionProps, motion } from 'motion/react'; export const groupVariants = { initial: { diff --git a/src/layout/Motion/MotionItem.tsx b/src/layout/Motion/MotionItem.tsx index cd548870..3b409545 100644 --- a/src/layout/Motion/MotionItem.tsx +++ b/src/layout/Motion/MotionItem.tsx @@ -1,5 +1,5 @@ import React, { FC, ReactNode } from 'react'; -import { HTMLMotionProps, motion } from 'framer-motion'; +import { HTMLMotionProps, motion } from 'motion/react'; export const verticalVariant = { initial: { diff --git a/src/layout/Tabs/Tab.tsx b/src/layout/Tabs/Tab.tsx index cc351fcc..471b694f 100644 --- a/src/layout/Tabs/Tab.tsx +++ b/src/layout/Tabs/Tab.tsx @@ -2,7 +2,7 @@ import React, { FC, PropsWithChildren } from 'react'; import { Button } from '@/elements/Button'; import { TabsTheme } from './TabsTheme'; import { useComponentTheme, cn } from '@/utils'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; export interface TabProps extends PropsWithChildren { /** diff --git a/src/layout/Tabs/Tabs.tsx b/src/layout/Tabs/Tabs.tsx index adbe5f2c..c6e2fbdb 100644 --- a/src/layout/Tabs/Tabs.tsx +++ b/src/layout/Tabs/Tabs.tsx @@ -9,7 +9,7 @@ import React, { } from 'react'; import { useId } from '@/utils'; import { twMerge } from 'tailwind-merge'; -import { AnimatePresence } from 'framer-motion'; +import { AnimatePresence } from 'motion/react'; import { useComponentTheme } from '@/utils/Theme/hooks'; import { TabsTheme } from './TabsTheme'; import { TabPanel } from './TabPanel'; diff --git a/src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.story.tsx b/src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.story.tsx index b0e1d708..58d6704d 100644 --- a/src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.story.tsx +++ b/src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.story.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import React, { useState, useRef } from 'react'; import { ConnectedOverlay } from './ConnectedOverlay'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; const meta: Meta = { title: 'Components/Utils/Overlay/Connected Overlay', diff --git a/src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.tsx b/src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.tsx index ef692ed1..7e698fa1 100644 --- a/src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.tsx +++ b/src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.tsx @@ -10,7 +10,7 @@ import React, { } from 'react'; import { TriggerTypes, OverlayTrigger } from '@/utils/Overlay/OverlayTrigger'; import { Modifiers, Placement, ReferenceProp } from '@/utils/Position'; -import { AnimatePresence } from 'framer-motion'; +import { AnimatePresence } from 'motion/react'; import { OverlayContext } from '@/utils/Overlay/OverlayContext'; import { ConnectedOverlayContent, diff --git a/src/utils/Overlay/GlobalOverlay/GlobalOverlay.story.tsx b/src/utils/Overlay/GlobalOverlay/GlobalOverlay.story.tsx index cd2a60e5..6695af25 100644 --- a/src/utils/Overlay/GlobalOverlay/GlobalOverlay.story.tsx +++ b/src/utils/Overlay/GlobalOverlay/GlobalOverlay.story.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import React, { Fragment, useState } from 'react'; import { GlobalOverlay } from './GlobalOverlay'; -import { motion } from 'framer-motion'; +import { motion } from 'motion/react'; import { useOverlay } from '../useOverlay'; const meta: Meta = { diff --git a/src/utils/Overlay/GlobalOverlay/GlobalOverlay.tsx b/src/utils/Overlay/GlobalOverlay/GlobalOverlay.tsx index b83d5419..8c227722 100644 --- a/src/utils/Overlay/GlobalOverlay/GlobalOverlay.tsx +++ b/src/utils/Overlay/GlobalOverlay/GlobalOverlay.tsx @@ -4,7 +4,7 @@ import { clearAllBodyScrollLocks } from 'body-scroll-lock-upgrade'; import { OverlayContext } from '@/utils/Overlay/OverlayContext'; -import { AnimatePresence } from 'framer-motion'; +import { AnimatePresence } from 'motion/react'; import { OverlayPortal } from '@/utils/Overlay/OverlayPortal'; import { useExitListener } from '@/utils/ExitListener'; import { Backdrop } from '@/layers/Backdrop';