refactor: migrate external packages to internal to avoid version incompatibility

.changeset/hot-news-arrive.md

@@ -0,0 +1,57 @@
+---
+"@heroui/internationalized-date": patch
+"@heroui/use-aria-multiselect": patch
+"@heroui/scroll-shadow": patch
+"@heroui/react-aria-i18n": patch
+"@heroui/autocomplete": patch
+"@heroui/dom-animation": patch
+"@heroui/breadcrumbs": patch
+"@heroui/date-picker": patch
+"@heroui/date-input": patch
+"@heroui/pagination": patch
+"@heroui/accordion": patch
+"@heroui/input-otp": patch
+"@heroui/use-pagination": patch
+"@heroui/calendar": patch
+"@heroui/checkbox": patch
+"@heroui/dropdown": patch
+"@heroui/progress": patch
+"@heroui/skeleton": patch
+"@heroui/divider": patch
+"@heroui/listbox": patch
+"@heroui/popover": patch
+"@heroui/snippet": patch
+"@heroui/spinner": patch
+"@heroui/tooltip": patch
+"@heroui/avatar": patch
+"@heroui/button": patch
+"@heroui/drawer": patch
+"@heroui/navbar": patch
+"@heroui/ripple": patch
+"@heroui/select": patch
+"@heroui/slider": patch
+"@heroui/spacer": patch
+"@heroui/switch": patch
+"@heroui/alert": patch
+"@heroui/badge": patch
+"@heroui/image": patch
+"@heroui/input": patch
+"@heroui/modal": patch
+"@heroui/radio": patch
+"@heroui/table": patch
+"@heroui/card": patch
+"@heroui/chip": patch
+"@heroui/code": patch
+"@heroui/form": patch
+"@heroui/link": patch
+"@heroui/menu": patch
+"@heroui/tabs": patch
+"@heroui/user": patch
+"@heroui/system-rsc": patch
+"@heroui/motion": patch
+"@heroui/kbd": patch
+"@heroui/system": patch
+"@heroui/react": patch
+---
+
+migrate external packages (#4567)

.changeset/stupid-pants-perform.md

@@ -15,7 +15,6 @@
 "@heroui/breadcrumbs": patch
 "@heroui/date-picker": patch
 "@heroui/use-callback-ref": patch
-"@heroui/framer-utils": patch
 "@heroui/shared-icons": patch
 "@heroui/date-input": patch
 "@heroui/pagination": patch

.npmrc

@@ -1,6 +1,5 @@
 strict-peer-dependencies=false
 enable-pre-post-scripts=true
 public-hoist-pattern[]=*tailwind-variants*
-public-hoist-pattern[]=*framer-motion*
 public-hoist-pattern[]=*@react-aria/interactions*
 public-hoist-pattern[]=*@heroui/theme*

apps/docs/app/examples/autocomplete/fully-controlled/page.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import {Autocomplete, AutocompleteItem, MenuTriggerAction} from "@heroui/react";
-import {useFilter} from "@react-aria/i18n";
+import {useFilter} from "@heroui/react-aria-i18n";
 
 const animals = [
   {label: "Cat", value: "cat", description: "The second most popular pet in the world"},

apps/docs/app/examples/perf/client-page.tsx

@@ -17,7 +17,7 @@ import {
   extendVariants,
   PaginationItem,
 } from "@heroui/react";
-import {useFilter} from "@react-aria/i18n";
+import {useFilter} from "@heroui/react-aria-i18n";
 import {useEffect, useMemo, useRef, useState} from "react";
 import {useSearchParams} from "next/navigation";
 

apps/docs/components/blog-post.tsx

@@ -5,7 +5,7 @@ import {Card, CardFooter, CardBody, CardHeader, Link, Avatar, Image} from "@hero
 import Balancer from "react-wrap-balancer";
 import {format, parseISO} from "date-fns";
 import NextLink from "next/link";
-import {AnimatePresence, motion} from "framer-motion";
+import {AnimatePresence, motion} from "@heroui/motion";
 import {usePostHog} from "posthog-js/react";
 
 import {useIsMounted} from "@/hooks/use-is-mounted";

apps/docs/components/blog/video-in-view.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/media-has-caption */
 "use client";
 
-import {useInView} from "framer-motion";
+import {useInView} from "@heroui/motion";
 import {useRef, FC, useEffect, useState, useCallback} from "react";
 import {Button, cn, Spinner, Tooltip} from "@heroui/react";
 

apps/docs/components/docs/components/code-demo/code-demo.tsx

@@ -3,7 +3,7 @@
 import React, {useCallback, useMemo, useRef} from "react";
 import dynamic from "next/dynamic";
 import {Skeleton, Tab, Tabs} from "@heroui/react";
-import {useInView} from "framer-motion";
+import {useInView} from "@heroui/motion";
 
 import {useCodeDemo, UseCodeDemoProps} from "./use-code-demo";
 import WindowResizer, {WindowResizerProps} from "./window-resizer";

apps/docs/components/docs/components/code-demo/react-live-demo.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import {LivePreview, LiveProvider, LiveError} from "react-live";
 import {clsx} from "@heroui/shared-utils";
 import * as HeroUI from "@heroui/react";
-import * as intlDateUtils from "@internationalized/date";
-import * as reactAriaI18n from "@react-aria/i18n";
+import * as intlDateUtils from "@heroui/internationalized-date";
+import * as reactAriaI18n from "@heroui/react-aria-i18n";
 import * as reactHookFormBase from "react-hook-form";
 import {SandpackFiles} from "@codesandbox/sandpack-react/types";
 

apps/docs/components/docs/components/code-demo/window-resizer.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {motion, useMotionValue, useTransform} from "framer-motion";
+import {motion, useMotionValue, useTransform} from "@heroui/motion";
 import {tv} from "tailwind-variants";
 
 import {useIsMobile} from "@/hooks/use-media-query";

apps/docs/components/marketing/a11y-otb.tsx

@@ -11,7 +11,7 @@ import {
   DropdownItem,
   Tooltip,
 } from "@heroui/react";
-import {useInView} from "framer-motion";
+import {useInView} from "@heroui/motion";
 import {clsx} from "@heroui/shared-utils";
 import {
   AddNoteBulkIcon,

apps/docs/components/navbar.tsx

@@ -25,7 +25,7 @@ import {isAppleDevice} from "@react-aria/utils";
 import {clsx} from "@heroui/shared-utils";
 import NextLink from "next/link";
 import {usePathname} from "next/navigation";
-import {motion, AnimatePresence} from "framer-motion";
+import {motion, AnimatePresence} from "@heroui/motion";
 import {useEffect} from "react";
 import {usePress} from "@react-aria/interactions";
 import {useFocusRing} from "@react-aria/focus";

apps/docs/components/sandpack/use-sandpack.ts

@@ -70,7 +70,6 @@ export const useSandpack = ({
   }, {});
 
   let dependencies = {
-    "framer-motion": "11.9.0",
     "@heroui/react": "latest",
   };
 
@@ -142,9 +141,7 @@ export const useSandpack = ({
   // const hasComponents = !isEmpty(heroUIComponents);
 
   // const dependencies = useMemo(() => {
-  //   let deps = {
-  //     "framer-motion": "11.9.0",
-  //   };
+  //   let deps = {};
 
   //   if (hasComponents) {
   //     let deps = {

apps/docs/content/components/autocomplete/fully-controlled.raw.jsx

@@ -1,5 +1,5 @@
 import {Autocomplete, AutocompleteItem} from "@heroui/react";
-import {useFilter} from "@react-aria/i18n";
+import {useFilter} from "@heroui/react-aria-i18n";
 
 export const animals = [
   {label: "Cat", key: "cat", description: "The second most popular pet in the world"},

apps/docs/content/components/autocomplete/fully-controlled.raw.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {Autocomplete, AutocompleteItem, MenuTriggerAction} from "@heroui/react";
-import {useFilter} from "@react-aria/i18n";
+import {useFilter} from "@heroui/react-aria-i18n";
 
 export type FieldState = {
   selectedKey: React.Key | null;

apps/docs/content/components/calendar/controlled-focused-value.raw.jsx

@@ -1,5 +1,5 @@
 import {Calendar} from "@heroui/react";
-import {today, getLocalTimeZone} from "@internationalized/date";
+import {today, getLocalTimeZone} from "@heroui/internationalized-date";
 
 export default function App() {
   let defaultDate = today(getLocalTimeZone());

apps/docs/content/components/calendar/controlled-focused-value.raw.tsx

@@ -2,7 +2,7 @@ import type {DateValue} from "@react-types/calendar";
 
 import React from "react";
 import {Calendar} from "@heroui/react";
-import {today, getLocalTimeZone} from "@internationalized/date";
+import {today, getLocalTimeZone} from "@heroui/internationalized-date";
 
 export default function App() {
   let defaultDate = today(getLocalTimeZone());

apps/docs/content/components/calendar/controlled.raw.jsx

@@ -1,5 +1,5 @@
 import {Calendar} from "@heroui/react";
-import {parseDate} from "@internationalized/date";
+import {parseDate} from "@heroui/internationalized-date";
 
 export default function App() {
   let [value, setValue] = React.useState(parseDate("2024-03-07"));

apps/docs/content/components/calendar/controlled.raw.tsx

@@ -2,7 +2,7 @@ import type {DateValue} from "@react-types/calendar";
 
 import React from "react";
 import {Calendar} from "@heroui/react";
-import {parseDate} from "@internationalized/date";
+import {parseDate} from "@heroui/internationalized-date";
 
 export default function App() {
   let [value, setValue] = React.useState<DateValue | null>(parseDate("2024-03-07"));

apps/docs/content/components/calendar/international-calendars.raw.jsx

@@ -1,5 +1,5 @@
 import {Calendar} from "@heroui/react";
-import {I18nProvider} from "@react-aria/i18n";
+import {I18nProvider} from "@heroui/react-aria-i18n";
 
 export default function App() {
   return (

apps/docs/content/components/calendar/invalid-date.raw.jsx

@@ -1,6 +1,6 @@
 import {Calendar} from "@heroui/react";
-import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
+import {today, getLocalTimeZone, isWeekend} from "@heroui/internationalized-date";
+import {useLocale} from "@heroui/react-aria-i18n";
 
 export default function App() {
   let [date, setDate] = React.useState(today(getLocalTimeZone()));

apps/docs/content/components/calendar/invalid-date.raw.tsx

@@ -2,8 +2,8 @@ import type {DateValue} from "@react-types/calendar";
 
 import React from "react";
 import {Calendar} from "@heroui/react";
-import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
+import {today, getLocalTimeZone, isWeekend} from "@heroui/internationalized-date";
+import {useLocale} from "@heroui/react-aria-i18n";
 
 export default function App() {
   let [date, setDate] = React.useState<DateValue | null>(today(getLocalTimeZone()));

apps/docs/content/components/calendar/max-date-value.raw.jsx

@@ -1,5 +1,5 @@
 import {Calendar} from "@heroui/react";
-import {today, getLocalTimeZone} from "@internationalized/date";
+import {today, getLocalTimeZone} from "@heroui/internationalized-date";
 
 export default function App() {
   return (

apps/docs/content/components/calendar/min-date-value.raw.jsx

@@ -1,5 +1,5 @@
 import {Calendar} from "@heroui/react";
-import {today, getLocalTimeZone} from "@internationalized/date";
+import {today, getLocalTimeZone} from "@heroui/internationalized-date";
 
 export default function App() {
   return (

apps/docs/content/components/calendar/presets.raw.jsx

@@ -1,6 +1,6 @@
 import {Calendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@heroui/react";
-import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
+import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@heroui/internationalized-date";
+import {useLocale} from "@heroui/react-aria-i18n";
 
 export default function App() {
   let defaultDate = today(getLocalTimeZone());

apps/docs/content/components/calendar/presets.raw.tsx

@@ -2,8 +2,8 @@ import type {DateValue} from "@react-types/calendar";
 
 import React from "react";
 import {Calendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@heroui/react";
-import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
+import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@heroui/internationalized-date";
+import {useLocale} from "@heroui/react-aria-i18n";
 
 export default function App() {
   let defaultDate = today(getLocalTimeZone());

apps/docs/content/components/calendar/read-only.raw.jsx

@@ -1,5 +1,5 @@
 import {Calendar} from "@heroui/react";
-import {today, getLocalTimeZone} from "@internationalized/date";
+import {today, getLocalTimeZone} from "@heroui/internationalized-date";
 
 export default function App() {
   return <Calendar isReadOnly aria-label="Date (Read Only)" value={today(getLocalTimeZone())} />;

apps/docs/content/components/calendar/unavailable-dates.raw.jsx

@@ -1,6 +1,6 @@
 import {Calendar} from "@heroui/react";
-import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
+import {today, getLocalTimeZone, isWeekend} from "@heroui/internationalized-date";
+import {useLocale} from "@heroui/react-aria-i18n";
 
 export default function App() {
   let now = today(getLocalTimeZone());

apps/docs/content/components/calendar/usage.raw.jsx

@@ -1,5 +1,5 @@
 import {Calendar} from "@heroui/react";
-import {parseDate} from "@internationalized/date";
+import {parseDate} from "@heroui/internationalized-date";
 
 export default function App() {
   return (

apps/docs/content/components/date-input/controlled.raw.jsx

@@ -1,6 +1,6 @@
 import {DateInput} from "@heroui/react";
-import {parseDate, getLocalTimeZone} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
+import {parseDate, getLocalTimeZone} from "@heroui/internationalized-date";
+import {useDateFormatter} from "@heroui/react-aria-i18n";
 
 export default function App() {
   const [value, setValue] = React.useState(parseDate("2024-04-04"));

apps/docs/content/components/date-input/controlled.raw.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import {DateInput} from "@heroui/react";
-import {DateValue, parseDate, getLocalTimeZone} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
+import {DateValue, parseDate, getLocalTimeZone} from "@heroui/internationalized-date";
+import {useDateFormatter} from "@heroui/react-aria-i18n";
 
 export default function App() {
   const [value, setValue] = React.useState<DateValue | null>(parseDate("2024-04-04"));

apps/docs/content/components/date-input/description.raw.jsx

@@ -1,5 +1,5 @@
 import {DateInput} from "@heroui/react";
-import {CalendarDate} from "@internationalized/date";
+import {CalendarDate} from "@heroui/internationalized-date";
 
 export default function App() {
   return (

apps/docs/content/components/date-input/disabled.raw.jsx

@@ -1,5 +1,5 @@
 import {DateInput} from "@heroui/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
+import {CalendarDate, parseDate} from "@heroui/internationalized-date";
 
 export default function App() {
   return (

apps/docs/content/components/date-input/error-message-function.raw.jsx

@@ -1,5 +1,5 @@
 import {DateInput} from "@heroui/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
+import {CalendarDate, parseDate} from "@heroui/internationalized-date";
 
 export default function App() {
   return (

apps/docs/content/components/date-input/error-message.raw.jsx

@@ -1,5 +1,5 @@
 import {DateInput} from "@heroui/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
+import {CalendarDate, parseDate} from "@heroui/internationalized-date";
 
 export default function App() {
   return (

apps/docs/content/components/date-input/granularity.raw.jsx

@@ -1,5 +1,5 @@
 import {DateInput} from "@heroui/react";
-import {now, parseAbsoluteToLocal} from "@internationalized/date";
+import {now, parseAbsoluteToLocal} from "@heroui/internationalized-date";
 
 export default function App() {
   let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));

apps/docs/content/components/date-input/granularity.raw.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {DateInput} from "@heroui/react";
-import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date";
+import {DateValue, now, parseAbsoluteToLocal} from "@heroui/internationalized-date";
 
 export default function App() {
   let [date, setDate] = React.useState<DateValue | null>(

apps/docs/content/components/date-input/hide-timezone.raw.jsx

@@ -1,5 +1,5 @@
 import {DateInput} from "@heroui/react";
-import {parseZonedDateTime} from "@internationalized/date";
+import {parseZonedDateTime} from "@heroui/internationalized-date";
 
 export default function App() {
   return (

apps/docs/content/components/date-input/hourly-cycle.raw.jsx

@@ -1,5 +1,5 @@
 import {DateInput} from "@heroui/react";
-import {parseZonedDateTime} from "@internationalized/date";
+import {parseZonedDateTime} from "@heroui/internationalized-date";
 
 export default function App() {
   return (

apps/docs/content/components/date-input/international-calendar.raw.jsx

@@ -1,6 +1,6 @@
 import {DateInput} from "@heroui/react";
-import {parseAbsoluteToLocal} from "@internationalized/date";
-import {I18nProvider} from "@react-aria/i18n";
+import {parseAbsoluteToLocal} from "@heroui/internationalized-date";
+import {I18nProvider} from "@heroui/react-aria-i18n";
 
 export default function App() {
   const [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));

apps/docs/content/components/date-input/international-calendar.raw.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import {DateInput} from "@heroui/react";
-import {DateValue, parseAbsoluteToLocal} from "@internationalized/date";
-import {I18nProvider} from "@react-aria/i18n";
+import {DateValue, parseAbsoluteToLocal} from "@heroui/internationalized-date";
+import {I18nProvider} from "@heroui/react-aria-i18n";
 
 export default function App() {
   const [date, setDate] = React.useState<DateValue | null>(