✨ add Sidemenu component with smooth hover effect and update changelog

apps/website/package.json

@@ -14,13 +14,13 @@
     "@radix-ui/react-slot": "1.1.0",
     "@radix-ui/react-tabs": "1.1.0",
     "class-variance-authority": "0.7.0",
-    "clsx": "2.1.0",
-    "cmdk": "1.0.0",
-    "date-fns": "3.6.0",
+    "clsx": "^2.x",
+    "cmdk": "^1.x",
+    "date-fns": "^3.x",
     "dom-to-image-more": "3.4.5",
-    "framer-motion": "11.2.10",
     "fs-extra": "11.2.0",
-    "lucide-react": "0.427.0",
+    "lucide-react": "^0.x",
+    "motion": "^11.x",
     "next": "14.2.3",
     "next-mdx-remote": "5.0.0",
     "next-themes": "0.3.0",
@@ -30,10 +30,10 @@
     "react-frame-component": "5.2.7",
     "react-resizable-panels": "2.0.22",
     "sharp": "0.33.4",
-    "sonner": "1.5.0",
+    "sonner": "^1.x",
     "tailwind-merge": "2.3.0",
     "vite-tsconfig-paths": "5.0.1",
-    "zustand": "4.5.4"
+    "zustand": "^4.x"
   },
   "description": "An open-source all-in-one library for building an advanced SaaS application, a personal website, or anything else with micro-interactions, advanced user experiences, and a focus on performance and code quality.",
   "devDependencies": {
@@ -91,4 +91,4 @@
     "type-check": "tsc --noEmit"
   },
   "version": "0.1.2"
-}
+}

apps/website/src/changelogs/2024-12-06.mdx

@@ -0,0 +1,7 @@
+---
+title: Sidemenu with smooth hover effect
+---
+
+#### New component
+
+- A new component has been added to the website: the `Sidemenu smooth hover` component in the navigation category.

apps/website/src/changelogs/last-changelog-date.ts

@@ -1,2 +1,2 @@
 // This file is generated by the generate-latest-changelog-date script
-export const lastChangelogDate = new Date("2024-11-27T23:00:00.000Z");
+export const lastChangelogDate = new Date("2024-12-05T23:00:00.000Z");

apps/website/src/components/component-wrapper/animated-tab-motion-div.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { type MotionProps, motion } from "framer-motion";
+import { type MotionProps, motion } from "motion/react";
 import type React from "react";
 import { cn } from "#/src/utils/cn";
 export default function AnimatedTabMotionDiv({

apps/website/src/components/floating-dock-navigation/floating-docks-component.tsx

@@ -9,8 +9,8 @@ import {
   useMotionValue,
   useSpring,
   useTransform,
-} from "framer-motion";
-import { ListCollapseIcon, type LucideIcon } from "lucide-react";
+} from "motion/react";
+import { ListCollapseIcon } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { type ReactNode, useEffect, useRef, useState } from "react";

apps/website/src/components/navigation/animated-background.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AnimatePresence, type Transition, motion } from "framer-motion";
+import { AnimatePresence, type Transition, motion } from "motion/react";
 import {
   Children,
   type ReactElement,

apps/website/src/lib/generated-package-check-list-to-install.ts

@@ -51,10 +51,6 @@ export const packageCheckListToInstall: PackageToInstallType[] = [
     find: [`from "dom-to-image-more"`],
     packageName: "dom-to-image-more",
   },
-  {
-    find: [`from "framer-motion"`],
-    packageName: "framer-motion",
-  },
   {
     find: [`from "fs-extra"`],
     packageName: "fs-extra",
@@ -63,6 +59,10 @@ export const packageCheckListToInstall: PackageToInstallType[] = [
     find: [`from "lucide-react"`],
     packageName: "lucide-react",
   },
+  {
+    find: [`from "motion"`],
+    packageName: "motion",
+  },
   {
     find: [`from "next"`],
     packageName: "next",

apps/website/src/ui/button.tsx

@@ -1,5 +1,5 @@
 import { type VariantProps, cva } from "class-variance-authority";
-import { type HTMLMotionProps, motion } from "framer-motion";
+import { type HTMLMotionProps, motion } from "motion/react";
 import type React from "react";
 import { cn } from "../utils/cn";
 import GradientContainer from "./gradient-container";

apps/website/src/ui/navigation-menu.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion } from "motion/react";
 import type React from "react";
 import {
   type ButtonHTMLAttributes,

packages/ui/cuicui/application-ui/action-menu/advanced-bottom-action-menu/advanced-bottom-action-menu.tsx

@@ -2,7 +2,7 @@
 
 "use client";
 
-import { AnimatePresence, type Variants, motion } from "framer-motion";
+import { AnimatePresence, type Variants, motion } from "motion/react";
 import type React from "react";
 import { createContext, useContext, useState } from "react";
 

packages/ui/cuicui/application-ui/action-menu/advanced-bottom-action-menu/custom-tabs-content.tsx

@@ -2,7 +2,7 @@
 
 // biome-ignore lint/style/noNamespaceImport: <explanation>
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion } from "motion/react";
 
 import {
   type ComponentPropsWithoutRef,

packages/ui/cuicui/application-ui/action-menu/action-menu.category.tsx → packages/ui/cuicui/application-ui/action-menu/category.ts

@@ -11,3 +11,5 @@ export const actionMenuCategory: CategoryType = {
   componentList: null,
   // componentList: [advancedBottomActionMenuComponent],
 };
+
+export default actionMenuCategory;

packages/ui/cuicui/application-ui/alert/alert.category.tsx → packages/ui/cuicui/application-ui/alert/category.ts

@@ -18,7 +18,7 @@ export const alertCategory: CategoryType = {
       variantList: [
         {
           name: "Default",
-          component: <SimpleAlert />,
+          component: SimpleAlert,
           slugPreviewFile: "simple-alert",
         },
       ],
@@ -32,7 +32,7 @@ export const alertCategory: CategoryType = {
       variantList: [
         {
           name: "Default",
-          component: <PreviewModernGlassyAlert />,
+          component: PreviewModernGlassyAlert,
           slugPreviewFile: "preview-modern-glassy-alert",
           slugComponentFile: "modern-glassy-alert",
         },
@@ -42,3 +42,5 @@ export const alertCategory: CategoryType = {
     },
   ],
 };
+
+export default alertCategory;

packages/ui/cuicui/application-ui/authentication/authentication.category.tsx → packages/ui/cuicui/application-ui/authentication/category.ts

@@ -15,7 +15,7 @@ export const authenticationCategory: CategoryType = {
       variantList: [
         {
           name: "Default",
-          component: <HalfSidedGlassMorphismAuthentication />,
+          component: HalfSidedGlassMorphismAuthentication,
           slugPreviewFile: "variant1",
         },
       ],
@@ -24,3 +24,5 @@ export const authenticationCategory: CategoryType = {
     },
   ],
 };
+
+export default authenticationCategory;

packages/ui/cuicui/application-ui/battery/battery.category.tsx → packages/ui/cuicui/application-ui/battery/category.ts

@@ -15,7 +15,7 @@ export const batteryCategory: CategoryType = {
       variantList: [
         {
           name: "Battery Indicator",
-          component: <PreviewBatteryIndicator />,
+          component: PreviewBatteryIndicator,
           slugPreviewFile: "preview-battery-indicator",
           slugComponentFile: "battery-indicator",
         },
@@ -25,3 +25,5 @@ export const batteryCategory: CategoryType = {
     },
   ],
 };
+
+export default batteryCategory;

packages/ui/cuicui/application-ui/code/code.category.tsx → packages/ui/cuicui/application-ui/code/category.ts

@@ -18,3 +18,5 @@ export const codeCategory: CategoryType = {
     advancedCodeBlockComponent,
   ],
 };
+
+export default codeCategory;

packages/ui/cuicui/application-ui/color-picker/category.ts

@@ -10,3 +10,5 @@ export const colorPickerCategory: CategoryType = {
   releaseDateCategory: new Date("2021-11-28"),
   componentList: [arcColorPickerComponent],
 };
+
+export default colorPickerCategory;

packages/ui/cuicui/application-ui/context-menu/category.ts

@@ -10,3 +10,4 @@ export const contextMenuCategory: CategoryType = {
   icon: SquareMenuIcon,
   componentList: [macOsContextMenuComponent],
 };
+export default contextMenuCategory;

packages/ui/cuicui/application-ui/cookie-banner/category.cookie-banner.tsx → packages/ui/cuicui/application-ui/cookie-banner/category.ts

@@ -11,3 +11,5 @@ export const cookieBannerCategory: CategoryType = {
   comingSoonCategory: false,
   componentList: [simpleCookieBannerComponent],
 };
+
+export default cookieBannerCategory;

packages/ui/cuicui/application-ui/dropdown-menu/category.ts

@@ -10,3 +10,5 @@ export const dropdownMenuCategory: CategoryType = {
   icon: PanelTopOpenIcon,
   componentList: [macOsDropdownComponent],
 };
+
+export default dropdownMenuCategory;

packages/ui/cuicui/application-ui/kbd/kbd.category.tsx → packages/ui/cuicui/application-ui/kbd/category.ts

@@ -16,7 +16,7 @@ export const kbdCategory: CategoryType = {
       variantList: [
         {
           name: "Default",
-          component: <ModernDetailedKbdVariant1 />,
+          component: ModernDetailedKbdVariant1,
           slugPreviewFile: "variant1",
         },
       ],
@@ -30,7 +30,7 @@ export const kbdCategory: CategoryType = {
       variantList: [
         {
           name: "Default",
-          component: <Modern3dKbdVariant1 />,
+          component: Modern3dKbdVariant1,
           slugPreviewFile: "variant1",
         },
       ],
@@ -39,3 +39,5 @@ export const kbdCategory: CategoryType = {
     },
   ],
 };
+
+export default kbdCategory;

packages/ui/cuicui/application-ui/notification/category.notification.tsx → packages/ui/cuicui/application-ui/notification/category.ts

@@ -10,3 +10,5 @@ export const notificationCategory: CategoryType = {
   icon: BellDotIcon,
   componentList: [dynamicIslandNotificationComponent],
 };
+
+export default notificationCategory;

packages/ui/cuicui/application-ui/notification/dynamic-island-notification/dynamic-island-notification.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { motion, AnimatePresence } from "framer-motion";
+import { motion, AnimatePresence } from "motion/react";
 
 import { BellIcon } from "lucide-react";
 import { useState } from "react";

packages/ui/cuicui/application-ui/search-bars/search-bars.category.tsx → packages/ui/cuicui/application-ui/search-bars/category.ts

@@ -15,7 +15,7 @@ export const searchBarsCategory: CategoryType = {
       variantList: [
         {
           name: "With press effect",
-          component: <GrowingSearchVariant1 />,
+          component: GrowingSearchVariant1,
           slugPreviewFile: "variant1",
         },
       ],
@@ -24,3 +24,5 @@ export const searchBarsCategory: CategoryType = {
     },
   ],
 };
+
+export default searchBarsCategory;

packages/ui/cuicui/application-ui/application-ui.section.ts → packages/ui/cuicui/application-ui/section.ts

@@ -1,22 +1,22 @@
 import { AppWindowMacIcon } from "lucide-react";
 import type { MultiComponentSectionType } from "@/lib/types/component";
-import { actionMenuCategory } from "@/cuicui/application-ui/action-menu/action-menu.category";
-import { alertCategory } from "@/cuicui/application-ui/alert/alert.category";
-import { authenticationCategory } from "@/cuicui/application-ui/authentication/authentication.category";
-import { batteryCategory } from "@/cuicui/application-ui/battery/battery.category";
-import { codeCategory } from "@/cuicui/application-ui/code/code.category";
-import { cookieBannerCategory } from "@/cuicui/application-ui/cookie-banner/category.cookie-banner";
-import { kbdCategory } from "@/cuicui/application-ui/kbd/kbd.category";
-import { searchBarsCategory } from "@/cuicui/application-ui/search-bars/search-bars.category";
-import { settingsCategory } from "@/cuicui/application-ui/settings/settings.category";
-import { signatureCategory } from "@/cuicui/application-ui/signature/signature.category";
-import { slidersCategory } from "@/cuicui/application-ui/sliders/sliders.category";
-import { staticSteppersCategory } from "@/cuicui/application-ui/static-steppers/static-steppers.category";
-import { themeCategory } from "@/cuicui/application-ui/theme/theme.category";
-import { treeCategory } from "@/cuicui/application-ui/tree/tree.category";
-import { notificationCategory } from "@/cuicui/application-ui/notification/category.notification";
+import { actionMenuCategory } from "@/cuicui/application-ui/action-menu/category";
+import { alertCategory } from "@/cuicui/application-ui/alert/category";
+import { authenticationCategory } from "@/cuicui/application-ui/authentication/category";
+import { batteryCategory } from "@/cuicui/application-ui/battery/category";
+import { codeCategory } from "@/cuicui/application-ui/code/category";
+import { cookieBannerCategory } from "@/cuicui/application-ui/cookie-banner/category";
+import { kbdCategory } from "@/cuicui/application-ui/kbd/category";
+import { searchBarsCategory } from "@/cuicui/application-ui/search-bars/category";
+import { settingsCategory } from "@/cuicui/application-ui/settings/category";
+import { signatureCategory } from "@/cuicui/application-ui/signature/category";
+import { slidersCategory } from "@/cuicui/application-ui/sliders/category";
+import { staticSteppersCategory } from "@/cuicui/application-ui/static-steppers/category";
+import { themeCategory } from "@/cuicui/application-ui/theme/category";
+import { treeCategory } from "@/cuicui/application-ui/tree/category";
+import { notificationCategory } from "@/cuicui/application-ui/notification/category";
 import { dropdownMenuCategory } from "@/cuicui/application-ui/dropdown-menu/category";
-import { tableOfContentCategory } from "@/cuicui/application-ui/table-of-contents/table-of-contents.category";
+import { tableOfContentCategory } from "@/cuicui/application-ui/table-of-contents/category";
 import { contextMenuCategory } from "@/cuicui/application-ui/context-menu/category";
 import { colorPickerCategory } from "@/cuicui/application-ui/color-picker/category";
 
@@ -48,3 +48,5 @@ export const applicationUiSection: MultiComponentSectionType = {
     treeCategory,
   ],
 };
+
+export default applicationUiSection;

packages/ui/cuicui/application-ui/settings/settings.category.tsx → packages/ui/cuicui/application-ui/settings/category.ts

@@ -15,7 +15,7 @@ export const settingsCategory: CategoryType = {
       variantList: [
         {
           name: "Default",
-          component: <DynamicSettingsVariant1 />,
+          component: DynamicSettingsVariant1,
           slugPreviewFile: "variant1",
         },
       ],
@@ -27,3 +27,5 @@ export const settingsCategory: CategoryType = {
     },
   ],
 };
+
+export default settingsCategory;

packages/ui/cuicui/application-ui/settings/dynamic-settings/variant1.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion } from "motion/react";
 
 import { PlusIcon, SquareIcon } from "lucide-react";
 import { useState } from "react";

packages/ui/cuicui/application-ui/signature/signature.category.tsx → packages/ui/cuicui/application-ui/signature/category.ts

@@ -10,3 +10,5 @@ export const signatureCategory: CategoryType = {
   icon: SignatureIcon,
   componentList: [reactSignatureComponent],
 };
+
+export default signatureCategory;

packages/ui/cuicui/application-ui/sliders/sliders.category.tsx → packages/ui/cuicui/application-ui/sliders/category.ts

@@ -19,7 +19,7 @@ export const slidersCategory: CategoryType = {
       variantList: [
         {
           name: "Default",
-          component: <ElasticSliderVariant1 />,
+          component: ElasticSliderVariant1,
           slugPreviewFile: "variant1",
         },
       ],
@@ -34,15 +34,17 @@ export const slidersCategory: CategoryType = {
       variantList: [
         {
           name: "Smooth",
-          component: <SimpleModernSlider />,
+          component: SimpleModernSlider,
           slugPreviewFile: "simple-modern-slider",
         },
         {
           name: "Min & max steps",
-          component: <SimpleModernSliderWithMax />,
+          component: SimpleModernSliderWithMax,
           slugPreviewFile: "simple-modern-slider-with-max",
         },
       ],
     },
   ],
 };
+
+export default slidersCategory;

packages/ui/cuicui/application-ui/sliders/elastic-slider/variant1.tsx

@@ -6,7 +6,7 @@ import {
   useMotionValue,
   useMotionValueEvent,
   useTransform,
-} from "framer-motion";
+} from "motion/react";
 import { Volume2Icon, VolumeXIcon } from "lucide-react";
 import { type ElementRef, useRef, useState } from "react";
 

packages/ui/cuicui/application-ui/static-steppers/static-steppers.category.tsx → packages/ui/cuicui/application-ui/static-steppers/category.ts

@@ -18,7 +18,7 @@ export const staticSteppersCategory: CategoryType = {
       variantList: [
         {
           name: "Default",
-          component: <StepWithStickyColorVariant1 />,
+          component: StepWithStickyColorVariant1,
           slugPreviewFile: "variant1",
         },
       ],
@@ -28,3 +28,5 @@ export const staticSteppersCategory: CategoryType = {
     },
   ],
 };
+
+export default staticSteppersCategory;