refactor: package optimisations

.changeset/clever-cherries-watch.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/system-rsc": patch
+---
+
+fixed `extendVariants` when having `defaultVariants` (#3009)

.changeset/cyan-emus-swim.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/date-picker": patch
+---
+
+Fix calendar props on date-range-picker

.changeset/dry-foxes-melt.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/radio": patch
+---
+
+Fix ensure radio input correctly references description (#2932)

.changeset/eleven-panthers-remain.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/avatar": patch
+---
+
+Removed extra `disableAnimation` prop in `getImageProps` (#3257)

.changeset/great-avocados-eat.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/chip": patch
+"@nextui-org/input": patch
+---
+
+Add accessible name to the icon button (#2802, #2808)

.changeset/nasty-forks-explode.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/accordion": patch
+"@nextui-org/theme": patch
+---
+
+Fixed variants for nested accordions (#3285)

.changeset/pink-rivers-rush.md

@@ -0,0 +1,20 @@
+---
+"@nextui-org/accordion": patch
+"@nextui-org/autocomplete": patch
+"@nextui-org/button": patch
+"@nextui-org/calendar": patch
+"@nextui-org/card": patch
+"@nextui-org/dropdown": patch
+"@nextui-org/modal": patch
+"@nextui-org/navbar": patch
+"@nextui-org/popover": patch
+"@nextui-org/ripple": patch
+"@nextui-org/select": patch
+"@nextui-org/snippet": patch
+"@nextui-org/tabs": patch
+"@nextui-org/tooltip": patch
+"@nextui-org/system": patch
+"@nextui-org/framer-utils": patch
+---
+
+update `framer-motion` versions

.changeset/tiny-kids-thank.md

@@ -0,0 +1,15 @@
+---
+"@nextui-org/accordion": patch
+"@nextui-org/calendar": patch
+"@nextui-org/modal": patch
+"@nextui-org/navbar": patch
+"@nextui-org/popover": patch
+"@nextui-org/ripple": patch
+"@nextui-org/tooltip": patch
+"@nextui-org/theme": patch
+"@nextui-org/use-infinite-scroll": patch
+"@nextui-org/dom-animation": patch
+"@nextui-org/shared-utils": patch
+---
+
+framer motion optimization (#3340)

.changeset/warm-suits-report.md

@@ -0,0 +1,8 @@
+---
+"@nextui-org/calendar": patch
+"@nextui-org/theme": patch
+"@nextui-org/use-infinite-scroll": patch
+"@nextui-org/shared-utils": patch
+---
+
+replaced lodash with native approaches

.eslintrc.json

@@ -87,7 +87,6 @@
         "prev": ["const", "let", "var"],
         "next": ["const", "let", "var"]
       }
-    ],
-    "import/consistent-type-specifier-style": ["error", "prefer-top-level"]
+    ]
   }
 }

.vscode/settings.json

@@ -3,12 +3,5 @@
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
-  },
-  "tailwindCSS.experimental.configFile": {
-    "packages/storybook/tailwind.config.js": ["packages/core/theme/**/*", "packages/components/**/*"],
-    "apps/docs/tailwind.config.js": "apps/docs/**/*"
-  },
-  "tailwindCSS.experimental.classRegex": [
-    ["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*).*?[\"'`]"]
-  ]
+  }
 }

apps/docs/app/blog/layout.tsx

@@ -1,7 +1,5 @@
 import {Image} from "@nextui-org/react";
 
-import {ScriptProviders} from "@/components/scripts/script-providers";
-
 interface DocsLayoutProps {
   children: React.ReactNode;
 }
@@ -24,8 +22,6 @@ export default function DocsLayout({children}: DocsLayoutProps) {
       >
         <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
       </div>
-
-      <ScriptProviders />
     </>
   );
 }

apps/docs/app/docs/layout.tsx

@@ -2,7 +2,6 @@ import {Image} from "@nextui-org/react";
 
 import manifest from "@/config/routes.json";
 import {DocsSidebar} from "@/components/docs/sidebar";
-import {ScriptProviders} from "@/components/scripts/script-providers";
 
 interface DocsLayoutProps {
   children: React.ReactNode;
@@ -31,8 +30,6 @@ export default function DocsLayout({children}: DocsLayoutProps) {
       >
         <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
       </div>
-
-      <ScriptProviders />
     </>
   );
 }

apps/docs/app/examples/table/custom-styles/page.tsx

@@ -23,7 +23,7 @@ import {
 } from "@nextui-org/react";
 import {ChevronDownIcon, SearchIcon} from "@nextui-org/shared-icons";
 import {useCallback, useMemo, useState} from "react";
-import {capitalize} from "lodash";
+import {capitalize} from "@nextui-org/shared-utils";
 
 import {PlusLinearIcon} from "@/components/icons";
 import {VerticalDotsIcon} from "@/components/icons/vertical-dots";

apps/docs/app/examples/table/use-case/page.tsx

@@ -23,7 +23,7 @@ import {
 } from "@nextui-org/react";
 import {ChevronDownIcon, SearchIcon} from "@nextui-org/shared-icons";
 import {useCallback, useMemo, useState} from "react";
-import {capitalize} from "lodash";
+import {capitalize} from "@nextui-org/shared-utils";
 
 import {PlusLinearIcon} from "@/components/icons";
 import {VerticalDotsIcon} from "@/components/icons/vertical-dots";

apps/docs/app/figma/page.tsx

@@ -2,7 +2,6 @@ import {Image} from "@nextui-org/react";
 
 import {Blockquote} from "@/components/docs/components/blockquote";
 import {FigmaButton} from "@/components/figma-button";
-import {ScriptProviders} from "@/components/scripts/script-providers";
 
 export default function FigmaPage() {
   return (
@@ -44,8 +43,6 @@ export default function FigmaPage() {
       >
         <Image removeWrapper alt="docs right background" src="/gradients/docs-right.png" />
       </div>
-
-      <ScriptProviders />
     </>
   );
 }

apps/docs/app/layout.tsx

@@ -12,6 +12,7 @@ import {fontSans} from "@/config/fonts";
 import {Navbar} from "@/components/navbar";
 import {Footer} from "@/components/footer";
 import {ProBanner} from "@/components/pro-banner";
+import {ScriptProviders} from "@/components/scripts/script-providers";
 
 export const metadata: Metadata = {
   title: {
@@ -76,6 +77,7 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
           </div>
           <Cmdk />
         </Providers>
+        <ScriptProviders />
       </body>
     </html>
   );

apps/docs/components/cmdk.tsx

@@ -13,7 +13,8 @@ import {clsx} from "@nextui-org/shared-utils";
 import scrollIntoView from "scroll-into-view-if-needed";
 import {isAppleDevice, isWebKit} from "@react-aria/utils";
 import {create} from "zustand";
-import {intersectionBy, isEmpty} from "lodash";
+import {isEmpty} from "@nextui-org/shared-utils";
+import intersectionBy from "lodash/intersectionBy";
 import {writeStorage, useLocalStorage} from "@rehooks/local-storage";
 
 import {

apps/docs/components/code-window/code-block.tsx

@@ -39,7 +39,7 @@ export type CodeBlockProps = PreProps & {
  * recursively get all text nodes as an array for a given element
  */
 function getTextNodes(node: any): any[] {
-  let childTextNodes: React.ReactNode[] = [];
+  let childTextNodes = [];
 
   if (!node.hasChildNodes()) return [];
 

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

@@ -12,7 +12,6 @@ import {
   Skeleton,
 } from "@nextui-org/react";
 import Link from "next/link";
-import {toLower} from "lodash";
 
 import {CodeWindow} from "@/components/code-window";
 import {useIsMobile} from "@/hooks/use-media-query";
@@ -30,8 +29,8 @@ export const DemoCodeModal: FC<DemoCodeModalProps> = ({isOpen, code, title, subt
 
   const isMobile = useIsMobile();
 
-  const lowerTitle = toLower(title);
-  const fileName = `${toLower(lowerTitle)}.tsx`;
+  const lowerTitle = title.toLowerCase();
+  const fileName = `${lowerTitle}.tsx`;
 
   return (
     <Modal

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

@@ -40,6 +40,7 @@ interface CodeDemoProps extends UseCodeDemoProps, WindowResizerProps {
   displayMode?: "always" | "visible";
   isGradientBox?: boolean;
   gradientColor?: GradientBoxProps["color"];
+  defaultExpanded?: boolean;
   previewHeight?: string | number;
   overflow?: "auto" | "visible" | "hidden";
   className?: string;
@@ -60,6 +61,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
   typescriptStrict = false,
   showOpenInCodeSandbox,
   isGradientBox = false,
+  defaultExpanded = false,
   previewHeight = "auto",
   overflow = "visible",
   displayMode = "always",
@@ -136,6 +138,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
 
     const content = (
       <DynamicSandpack
+        defaultExpanded={defaultExpanded}
         files={files}
         highlightedLines={highlightedLines}
         showEditor={showEditor}
@@ -152,6 +155,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
     isInView,
     files,
     highlightedLines,
+    defaultExpanded,
     showPreview,
     showSandpackPreview,
     showOpenInCodeSandbox,

apps/docs/components/docs/components/code-demo/utils.ts

@@ -1,17 +1,19 @@
-import {get} from "lodash";
-
 import {FileCode} from "./types";
 
 const importRegex = /^(import)\s(?!type(of\s|\s)(?!from)).*?$/gm;
 
 const exportDefaultRegex = /export\s+default\s+function\s+\w+\s*\(\s*\)\s*\{/;
 
-export const transformCode = (code: string, imports = {}, compName = "App") => {
+export const transformCode = (
+  code: string,
+  imports: {[key: string]: any} = {},
+  compName = "App",
+) => {
   let cleanedCode = code
     .replace(importRegex, (match) => {
       // get component name from the match ex. "import { Table } from '@nextui-org/react'"
       const componentName = match.match(/\w+/g)?.[1] || "";
-      const matchingImport = get(imports, componentName);
+      const matchingImport = imports[componentName] || {};
 
       if (matchingImport) {
         // remove the matching import

apps/docs/components/docs/components/codeblock.tsx

@@ -1,7 +1,7 @@
 import React, {forwardRef, useEffect} from "react";
 import {clsx, dataAttr, getUniqueID} from "@nextui-org/shared-utils";
 import BaseHighlight, {Language, PrismTheme, defaultProps} from "prism-react-renderer";
-import {debounce, omit} from "lodash";
+import {debounce, omit} from "@nextui-org/shared-utils";
 
 import defaultTheme from "@/libs/prism-theme";
 

apps/docs/components/docs/components/swatch-colors-set.tsx

@@ -1,10 +1,10 @@
 import {parseToRgba, readableColor} from "color2k";
 import {Button, Tooltip} from "@nextui-org/react";
-import {commonColors, semanticColors} from "@nextui-org/theme";
+import {commonColors, semanticColors, SemanticBaseColors, ThemeColors} from "@nextui-org/theme";
 import {useClipboard} from "@nextui-org/use-clipboard";
 import {useState} from "react";
 import {useTheme} from "next-themes";
-import {get, isEmpty} from "lodash";
+import {isEmpty} from "@nextui-org/shared-utils";
 
 type ColorsItem = {
   color: string;
@@ -106,12 +106,12 @@ const SemanticSwatch = ({
   let value: string = "";
   const [colorName, colorScale] = color.split("-");
 
-  let currentPalette = get(semanticColors, theme ?? "", {});
+  const currentPalette = semanticColors[theme as keyof SemanticBaseColors] || {};
 
   if (!colorScale) {
-    value = get(currentPalette, `${colorName}.DEFAULT`, "");
+    value = (currentPalette[colorName as keyof ThemeColors] as any)?.DEFAULT || "";
   } else {
-    value = get(currentPalette, `${colorName}.${colorScale}`, "");
+    value = (currentPalette[colorName as keyof ThemeColors] as any)?.colorScale || "";
   }
 
   const handleCopy = () => {

apps/docs/components/docs/sidebar.tsx

@@ -18,7 +18,7 @@ import {
   dataFocusVisibleClasses,
 } from "@nextui-org/react";
 import Link from "next/link";
-import {isEmpty} from "lodash";
+import {isEmpty} from "@nextui-org/shared-utils";
 import {usePathname, useRouter} from "next/navigation";
 
 import {ScrollArea} from "../scroll-area";

apps/docs/components/footer.tsx

@@ -14,9 +14,7 @@ export const Footer = () => {
   return (
     <footer className="container mx-auto max-w-7xl pb-12 px-12">
       <div className="flex flex-col justify-center items-center gap-1">
-        <p className="text-sm text-default-400">
-          © {getCurrentYear()} NextUI Inc. All rights reserved.
-        </p>
+        <p className="text-sm text-default-400">© {getCurrentYear()} NextUI Inc.</p>
       </div>
     </footer>
   );

apps/docs/components/marketing/custom-themes/custom-themes.tsx

@@ -3,7 +3,6 @@
 /* eslint-disable react/display-name */
 import {useMemo, useState} from "react";
 import {Tabs, Tab, Card, CardBody, Image, Button, RadioGroup, Radio} from "@nextui-org/react";
-import get from "lodash/get";
 import NextLink from "next/link";
 import NextImage from "next/image";
 
@@ -238,7 +237,7 @@ export const CustomThemes = () => {
           <CodeWindow
             showWindowIcons
             className="max-h-[440px] min-h-[390px]"
-            highlightLines={get(codeHighlights, selectedTheme)}
+            highlightLines={codeHighlights[selectedTheme]}
             isScrollable={false}
             language="jsx"
             title="tailwind.config.js"

apps/docs/components/marketing/custom-themes/styles.ts

@@ -41,7 +41,7 @@ export const shopCartStyles = tv({
       "!ease-soft-spring",
       "!duration-300",
     ],
-    contentWrapper: "flex flex-col justify-center transition-all h-full min-h-[200px]",
+    contentWrapper: "flex flex-col justify-center transition-all h-full h-[200px]",
     title: ["relative", "w-full", "flex-none", "text-xl", "font-semibold", "text-foreground"],
     description: ["my-2", "w-full", "text-base", "text-default-500"],
     price: "relative text-lg font-semibold text-foreground",

apps/docs/components/marketing/hero/floating-components.tsx

@@ -67,7 +67,7 @@ export const FloatingComponents: React.FC<{}> = () => {
             alt="Professional camera"
             as={NextImage}
             className="object-cover -translate-y-12 h-[100%]"
-            height={180}
+            height={120}
             src="/images/card-example-6.webp"
             width={120}
           />

apps/docs/components/marketing/support.tsx

@@ -2,7 +2,7 @@
 
 import {FC, useMemo, useRef} from "react";
 import {Avatar, AvatarProps, Button, Spacer, Tooltip} from "@nextui-org/react";
-import {clamp, get} from "lodash";
+import {clamp} from "@nextui-org/shared-utils";
 
 import {sectionWrapper, titleWrapper, title, subtitle} from "../primitives";
 
@@ -132,9 +132,7 @@ export const Support: FC<SupportProps> = ({sponsors = []}) => {
             size={getSponsorSize(sponsor, isMobile)}
             src={sponsor.image}
             style={getSponsorAvatarStyles(index, sponsors)}
-            onClick={() =>
-              handleExternalLinkClick(get(sponsor, "website") || get(sponsor, "profile"))
-            }
+            onClick={() => handleExternalLinkClick(sponsor["website"] || sponsor["profile"])}
           />
         ))}
       </div>