@customafk/lunas-ui 0.0.0-v → 0.0.0-x

package/dist/Atoms/index.js

@@ -202,12 +202,13 @@ var cn = (...inputs) => {
 };
 
 // packages/Atoms/Button/index.tsx
+import { motion } from "framer-motion";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Button = memo(
   forwardRef(
     ({ className, variant, size, icon, asChild = false, children, ...props }, reference) => {
       const Comp = asChild ? Slot : "button";
-      return /* @__PURE__ */ jsxs(
+      return /* @__PURE__ */ jsx(motion.div, { whileHover: { scale: 1.1 }, whileTap: { scale: 0.9 }, children: /* @__PURE__ */ jsxs(
         Comp,
         {
           className: cn(buttonVariants({ variant, size, className })),
@@ -218,7 +219,7 @@ var Button = memo(
             /* @__PURE__ */ jsx(Slottable, { children })
           ]
         }
-      );
+      ) });
     }
   )
 );
@@ -1617,46 +1618,57 @@ var WhiteLogoWithIcon = (props) => {
 WhiteLogoWithIcon.displayName = "WhiteLogoWithIcon";
 
 // packages/Atoms/Navbar/index.tsx
+import { motion as motion2 } from "framer-motion";
 import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
 var NavbarItem = memo3(
   forwardRef3(
     ({ enableLeftIcon = false, isActive = false, icon, className, children, ...props }, reference) => {
-      return /* @__PURE__ */ jsxs19(
-        "div",
+      return /* @__PURE__ */ jsx37(
+        motion2.div,
         {
-          ref: reference,
-          className: cn(
-            ["group"],
-            [
-              "relative flex h-fit w-fit items-center gap-1 overflow-x-hidden overflow-y-hidden px-2 pb-3 pt-3"
-            ],
-            ["select-none text-ui-p font-medium"],
-            ["hover:cursor-pointer"],
-            ["transition-colors duration-150 ease-in-out"],
-            [
-              'before:absolute before:inset-x-0 before:top-11 before:z-10 before:h-1 before:-translate-x-full before:bg-ui-primary-default before:transition-all before:duration-300 before:ease-in-out before:content-[""] before:hover:translate-x-0'
-            ],
+          whileHover: {
+            opacity: 0.8
+          },
+          whileTap: { scale: 0.9 },
+          children: /* @__PURE__ */ jsxs19(
+            "div",
             {
-              "text-ui-primary-default": isActive
-            },
-            className
-          ),
-          ...props,
-          children: [
-            icon,
-            /* @__PURE__ */ jsx37("p", { children }),
-            Boolean(enableLeftIcon) && /* @__PURE__ */ jsx37(
-              Lucide2ChevronDownIcon_default,
-              {
-                className: cn(
-                  ["mt-0.5 size-4"],
-                  ["transition duration-300 ease-in-out"],
-                  ["group-hover:rotate-180"]
-                ),
-                color: isActive ? "currentColor" : "#434349"
-              }
-            )
-          ]
+              ref: reference,
+              className: cn(
+                ["group"],
+                [
+                  "relative flex h-fit w-fit items-center gap-1 overflow-x-hidden overflow-y-hidden px-2 pb-3 pt-3"
+                ],
+                ["select-none text-ui-p font-medium"],
+                ["hover:cursor-pointer"],
+                ["transition-colors duration-150 ease-in-out"],
+                // [
+                //   'before:absolute before:inset-x-0 before:top-11 before:z-10 before:h-1 before:-translate-x-full before:bg-ui-primary-default before:transition-all before:duration-300 before:ease-in-out before:content-[""] before:hover:translate-x-0',
+                // ],
+                {
+                  "text-ui-primary-default": isActive
+                },
+                className
+              ),
+              ...props,
+              children: [
+                icon,
+                /* @__PURE__ */ jsx37("p", { children }),
+                /* @__PURE__ */ jsx37(motion2.div, { className: "absolute inset-x-0 top-11 z-50 h-1 -translate-x-full bg-ui-primary-default transition-all duration-300 ease-in-out group-hover:translate-x-0" }),
+                Boolean(enableLeftIcon) && /* @__PURE__ */ jsx37(
+                  Lucide2ChevronDownIcon_default,
+                  {
+                    className: cn(
+                      ["mt-0.5 size-4"],
+                      ["transition duration-300 ease-in-out"],
+                      ["group-hover:rotate-180"]
+                    ),
+                    color: isActive ? "currentColor" : "#434349"
+                  }
+                )
+              ]
+            }
+          )
         }
       );
     }
@@ -1668,6 +1680,7 @@ NavbarItem.displayName = "NavbarItem";
 import React2 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, Circle } from "lucide-react";
+import { motion as motion3 } from "framer-motion";
 import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
 var { Root: DropdownMenu } = DropdownMenuPrimitive;
 var { Group: DropdownMenuGroup } = DropdownMenuPrimitive;
@@ -1675,17 +1688,24 @@ var { Portal: DropdownMenuPortal } = DropdownMenuPrimitive;
 var { Sub: DropdownMenuSub } = DropdownMenuPrimitive;
 var { RadioGroup: DropdownMenuRadioGroup } = DropdownMenuPrimitive;
 var DropdownMenuTrigger = React2.forwardRef(({ className = "", children, ...props }, reference) => /* @__PURE__ */ jsx38(
-  DropdownMenuPrimitive.Trigger,
+  motion3.div,
   {
-    ...props,
-    ref: reference,
-    className: cn(
-      "flex select-none gap-x-2 overflow-hidden rounded-lg px-2 py-1 outline-none",
-      "hover:bg-neutral-200",
-      "transition-colors duration-300 ease-in-out",
-      className
-    ),
-    children
+    whileHover: {
+      backgroundColor: "rgba(0, 0, 0, 0.05)"
+    },
+    className: "rounded-lg",
+    children: /* @__PURE__ */ jsx38(
+      DropdownMenuPrimitive.Trigger,
+      {
+        ...props,
+        ref: reference,
+        className: cn(
+          "flex select-none gap-x-2 overflow-hidden rounded-lg px-2 py-1 outline-none",
+          className
+        ),
+        children
+      }
+    )
   }
 ));
 DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName;
@@ -1730,6 +1750,7 @@ DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayNam
 var DropdownMenuContent = React2.forwardRef(({ className, sideOffset = 4, ...props }, reference) => /* @__PURE__ */ jsx38(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx38(
   DropdownMenuPrimitive.Content,
   {
+    ...props,
     ref: reference,
     sideOffset,
     className: cn(
@@ -1745,12 +1766,11 @@ var DropdownMenuContent = React2.forwardRef(({ className, sideOffset = 4, ...pro
       "data-[side=bottom]:slide-in-from-top-2",
       "data-[side=left]:slide-in-from-right-2",
       className
-    ),
-    ...props
+    )
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React2.forwardRef(({ className, inset, ...props }, reference) => /* @__PURE__ */ jsx38(
+var DropdownMenuItem = React2.forwardRef(({ className, inset, ...props }, reference) => /* @__PURE__ */ jsx38(motion3.div, { whileHover: { scale: 1.05 }, whileTap: { scale: 0.9 }, children: /* @__PURE__ */ jsx38(
   DropdownMenuPrimitive.Item,
   {
     ref: reference,
@@ -1765,7 +1785,7 @@ var DropdownMenuItem = React2.forwardRef(({ className, inset, ...props }, refere
     ),
     ...props
   }
-));
+) }));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 var DropdownMenuCheckboxItem = React2.forwardRef(({ className, children, checked, ...props }, reference) => /* @__PURE__ */ jsxs20(
   DropdownMenuPrimitive.CheckboxItem,

package/dist/Icons/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { I as IIconProps } from '../types-BUTht_HJ.js';
+import { I as IIconProps } from '../types-DdUenP1k.js';
 import 'react';
 
 declare const AvatarIcon: {

package/dist/Molecules/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { HTMLAttributes } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { T as TUserSettingSelect } from '../types-BUTht_HJ.js';
+import { a as TUserSettingSelect } from '../types-DdUenP1k.js';
 import { z } from 'zod';
 
 interface IProps {

package/dist/Molecules/index.js

@@ -202,12 +202,13 @@ var cn = (...inputs) => {
 };
 
 // packages/Atoms/Button/index.tsx
+import { motion } from "framer-motion";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Button = memo(
   forwardRef(
     ({ className, variant, size, icon, asChild = false, children, ...props }, reference) => {
       const Comp = asChild ? Slot : "button";
-      return /* @__PURE__ */ jsxs(
+      return /* @__PURE__ */ jsx(motion.div, { whileHover: { scale: 1.1 }, whileTap: { scale: 0.9 }, children: /* @__PURE__ */ jsxs(
         Comp,
         {
           className: cn(buttonVariants({ variant, size, className })),
@@ -218,7 +219,7 @@ var Button = memo(
             /* @__PURE__ */ jsx(Slottable, { children })
           ]
         }
-      );
+      ) });
     }
   )
 );
@@ -1628,46 +1629,57 @@ var WhiteLogoWithIcon = (props) => {
 WhiteLogoWithIcon.displayName = "WhiteLogoWithIcon";
 
 // packages/Atoms/Navbar/index.tsx
+import { motion as motion2 } from "framer-motion";
 import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
 var NavbarItem = memo3(
   forwardRef3(
     ({ enableLeftIcon = false, isActive = false, icon, className, children, ...props }, reference) => {
-      return /* @__PURE__ */ jsxs19(
-        "div",
+      return /* @__PURE__ */ jsx37(
+        motion2.div,
         {
-          ref: reference,
-          className: cn(
-            ["group"],
-            [
-              "relative flex h-fit w-fit items-center gap-1 overflow-x-hidden overflow-y-hidden px-2 pb-3 pt-3"
-            ],
-            ["select-none text-ui-p font-medium"],
-            ["hover:cursor-pointer"],
-            ["transition-colors duration-150 ease-in-out"],
-            [
-              'before:absolute before:inset-x-0 before:top-11 before:z-10 before:h-1 before:-translate-x-full before:bg-ui-primary-default before:transition-all before:duration-300 before:ease-in-out before:content-[""] before:hover:translate-x-0'
-            ],
-            {
-              "text-ui-primary-default": isActive
-            },
-            className
-          ),
-          ...props,
-          children: [
-            icon,
-            /* @__PURE__ */ jsx37("p", { children }),
-            Boolean(enableLeftIcon) && /* @__PURE__ */ jsx37(
-              Lucide2ChevronDownIcon_default,
-              {
-                className: cn(
-                  ["mt-0.5 size-4"],
-                  ["transition duration-300 ease-in-out"],
-                  ["group-hover:rotate-180"]
-                ),
-                color: isActive ? "currentColor" : "#434349"
-              }
-            )
-          ]
+          whileHover: {
+            opacity: 0.8
+          },
+          whileTap: { scale: 0.9 },
+          children: /* @__PURE__ */ jsxs19(
+            "div",
+            {
+              ref: reference,
+              className: cn(
+                ["group"],
+                [
+                  "relative flex h-fit w-fit items-center gap-1 overflow-x-hidden overflow-y-hidden px-2 pb-3 pt-3"
+                ],
+                ["select-none text-ui-p font-medium"],
+                ["hover:cursor-pointer"],
+                ["transition-colors duration-150 ease-in-out"],
+                // [
+                //   'before:absolute before:inset-x-0 before:top-11 before:z-10 before:h-1 before:-translate-x-full before:bg-ui-primary-default before:transition-all before:duration-300 before:ease-in-out before:content-[""] before:hover:translate-x-0',
+                // ],
+                {
+                  "text-ui-primary-default": isActive
+                },
+                className
+              ),
+              ...props,
+              children: [
+                icon,
+                /* @__PURE__ */ jsx37("p", { children }),
+                /* @__PURE__ */ jsx37(motion2.div, { className: "absolute inset-x-0 top-11 z-50 h-1 -translate-x-full bg-ui-primary-default transition-all duration-300 ease-in-out group-hover:translate-x-0" }),
+                Boolean(enableLeftIcon) && /* @__PURE__ */ jsx37(
+                  Lucide2ChevronDownIcon_default,
+                  {
+                    className: cn(
+                      ["mt-0.5 size-4"],
+                      ["transition duration-300 ease-in-out"],
+                      ["group-hover:rotate-180"]
+                    ),
+                    color: isActive ? "currentColor" : "#434349"
+                  }
+                )
+              ]
+            }
+          )
         }
       );
     }
@@ -1679,6 +1691,7 @@ NavbarItem.displayName = "NavbarItem";
 import React2 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, Circle } from "lucide-react";
+import { motion as motion3 } from "framer-motion";
 import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
 var { Root: DropdownMenu } = DropdownMenuPrimitive;
 var { Group: DropdownMenuGroup } = DropdownMenuPrimitive;
@@ -1686,17 +1699,24 @@ var { Portal: DropdownMenuPortal } = DropdownMenuPrimitive;
 var { Sub: DropdownMenuSub } = DropdownMenuPrimitive;
 var { RadioGroup: DropdownMenuRadioGroup } = DropdownMenuPrimitive;
 var DropdownMenuTrigger = React2.forwardRef(({ className = "", children, ...props }, reference) => /* @__PURE__ */ jsx38(
-  DropdownMenuPrimitive.Trigger,
+  motion3.div,
   {
-    ...props,
-    ref: reference,
-    className: cn(
-      "flex select-none gap-x-2 overflow-hidden rounded-lg px-2 py-1 outline-none",
-      "hover:bg-neutral-200",
-      "transition-colors duration-300 ease-in-out",
-      className
-    ),
-    children
+    whileHover: {
+      backgroundColor: "rgba(0, 0, 0, 0.05)"
+    },
+    className: "rounded-lg",
+    children: /* @__PURE__ */ jsx38(
+      DropdownMenuPrimitive.Trigger,
+      {
+        ...props,
+        ref: reference,
+        className: cn(
+          "flex select-none gap-x-2 overflow-hidden rounded-lg px-2 py-1 outline-none",
+          className
+        ),
+        children
+      }
+    )
   }
 ));
 DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName;
@@ -1741,6 +1761,7 @@ DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayNam
 var DropdownMenuContent = React2.forwardRef(({ className, sideOffset = 4, ...props }, reference) => /* @__PURE__ */ jsx38(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx38(
   DropdownMenuPrimitive.Content,
   {
+    ...props,
     ref: reference,
     sideOffset,
     className: cn(
@@ -1756,12 +1777,11 @@ var DropdownMenuContent = React2.forwardRef(({ className, sideOffset = 4, ...pro
       "data-[side=bottom]:slide-in-from-top-2",
       "data-[side=left]:slide-in-from-right-2",
       className
-    ),
-    ...props
+    )
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React2.forwardRef(({ className, inset, ...props }, reference) => /* @__PURE__ */ jsx38(
+var DropdownMenuItem = React2.forwardRef(({ className, inset, ...props }, reference) => /* @__PURE__ */ jsx38(motion3.div, { whileHover: { scale: 1.05 }, whileTap: { scale: 0.9 }, children: /* @__PURE__ */ jsx38(
   DropdownMenuPrimitive.Item,
   {
     ref: reference,
@@ -1776,7 +1796,7 @@ var DropdownMenuItem = React2.forwardRef(({ className, inset, ...props }, refere
     ),
     ...props
   }
-));
+) }));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 var DropdownMenuCheckboxItem = React2.forwardRef(({ className, children, checked, ...props }, reference) => /* @__PURE__ */ jsxs20(
   DropdownMenuPrimitive.CheckboxItem,
@@ -2691,31 +2711,20 @@ var Flex_default = Flex;
 import { jsx as jsx45, jsxs as jsxs23 } from "react/jsx-runtime";
 var UserAvatarTriggerButton = memo6(
   forwardRef8(({ user, focused, ...props }, reference) => {
-    return /* @__PURE__ */ jsxs23(
-      Flex_default,
-      {
-        px: 2,
-        py: 1,
-        gap: 2,
-        ref: reference,
-        ...props,
-        className: String(focused ? "bg-neutral-200" : ""),
-        children: [
-          /* @__PURE__ */ jsx45(UserAvatar_default, { size: 32, fullname: user.fullname, email: user.email, src: user.avatar }),
-          /* @__PURE__ */ jsx45("p", { className: "text-ui-p font-semibold text-ui-text-800", children: user.username }),
-          /* @__PURE__ */ jsx45(
-            Lucide2ChevronDownIcon_default,
-            {
-              size: 16,
-              className: cn(
-                "transform transition-transform duration-300 ease-in-out",
-                focused ? "rotate-180" : "rotate-0"
-              )
-            }
+    return /* @__PURE__ */ jsxs23(Flex_default, { px: "2", py: "1", gap: "3", ref: reference, ...props, children: [
+      /* @__PURE__ */ jsx45(UserAvatar_default, { size: 32, fullname: user.fullname, email: user.email, src: user.avatar }),
+      /* @__PURE__ */ jsx45("p", { className: "text-ui-p font-semibold text-ui-text-800", children: user.username }),
+      /* @__PURE__ */ jsx45(
+        Lucide2ChevronDownIcon_default,
+        {
+          size: 16,
+          className: cn(
+            "transform transition-transform duration-300 ease-in-out",
+            focused ? "rotate-180" : "rotate-0"
           )
-        ]
-      }
-    );
+        }
+      )
+    ] });
   })
 );
 UserAvatarTriggerButton.displayName = "UserAvatarTriggerButton";
@@ -2914,6 +2923,7 @@ import {
 } from "react";
 
 // packages/Molecules/AuthenForm/components/EmailInput/index.tsx
+import { motion as motion4 } from "framer-motion";
 import {
   forwardRef as forwardRef10,
   memo as memo9,
@@ -2980,7 +2990,7 @@ var EmailInput = memo9(
       );
     }, [errorMessage]);
     return /* @__PURE__ */ jsxs25(
-      "div",
+      motion4.div,
       {
         ref: reference,
         className: cn(

package/dist/Organisms/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { HTMLAttributes } from 'react';
-import { a as TUser, T as TUserSettingSelect } from '../types-BUTht_HJ.js';
+import { T as TUser, a as TUserSettingSelect } from '../types-DdUenP1k.js';
 
 type THeaderNav = 'CATEGORY' | 'SERIES' | 'GUIDE' | 'NEWS' | null;
 interface IHeaderProps extends HTMLAttributes<HTMLHeadElement> {

package/dist/Organisms/index.js

@@ -263,12 +263,13 @@ var cn = (...inputs) => {
 };
 
 // packages/Atoms/Button/index.tsx
+import { motion } from "framer-motion";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var Button = memo(
   forwardRef(
     ({ className, variant, size, icon, asChild = false, children, ...props }, reference) => {
       const Comp = asChild ? Slot : "button";
-      return /* @__PURE__ */ jsxs2(
+      return /* @__PURE__ */ jsx2(motion.div, { whileHover: { scale: 1.1 }, whileTap: { scale: 0.9 }, children: /* @__PURE__ */ jsxs2(
         Comp,
         {
           className: cn(buttonVariants({ variant, size, className })),
@@ -279,7 +280,7 @@ var Button = memo(
             /* @__PURE__ */ jsx2(Slottable, { children })
           ]
         }
-      );
+      ) });
     }
   )
 );
@@ -1694,46 +1695,57 @@ var WhiteLogoWithIcon = (props) => {
 WhiteLogoWithIcon.displayName = "WhiteLogoWithIcon";
 
 // packages/Atoms/Navbar/index.tsx
+import { motion as motion2 } from "framer-motion";
 import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
 var NavbarItem = memo3(
   forwardRef3(
     ({ enableLeftIcon = false, isActive = false, icon, className, children, ...props }, reference) => {
-      return /* @__PURE__ */ jsxs20(
-        "div",
+      return /* @__PURE__ */ jsx38(
+        motion2.div,
         {
-          ref: reference,
-          className: cn(
-            ["group"],
-            [
-              "relative flex h-fit w-fit items-center gap-1 overflow-x-hidden overflow-y-hidden px-2 pb-3 pt-3"
-            ],
-            ["select-none text-ui-p font-medium"],
-            ["hover:cursor-pointer"],
-            ["transition-colors duration-150 ease-in-out"],
-            [
-              'before:absolute before:inset-x-0 before:top-11 before:z-10 before:h-1 before:-translate-x-full before:bg-ui-primary-default before:transition-all before:duration-300 before:ease-in-out before:content-[""] before:hover:translate-x-0'
-            ],
-            {
-              "text-ui-primary-default": isActive
-            },
-            className
-          ),
-          ...props,
-          children: [
-            icon,
-            /* @__PURE__ */ jsx38("p", { children }),
-            Boolean(enableLeftIcon) && /* @__PURE__ */ jsx38(
-              Lucide2ChevronDownIcon_default,
-              {
-                className: cn(
-                  ["mt-0.5 size-4"],
-                  ["transition duration-300 ease-in-out"],
-                  ["group-hover:rotate-180"]
-                ),
-                color: isActive ? "currentColor" : "#434349"
-              }
-            )
-          ]
+          whileHover: {
+            opacity: 0.8
+          },
+          whileTap: { scale: 0.9 },
+          children: /* @__PURE__ */ jsxs20(
+            "div",
+            {
+              ref: reference,
+              className: cn(
+                ["group"],
+                [
+                  "relative flex h-fit w-fit items-center gap-1 overflow-x-hidden overflow-y-hidden px-2 pb-3 pt-3"
+                ],
+                ["select-none text-ui-p font-medium"],
+                ["hover:cursor-pointer"],
+                ["transition-colors duration-150 ease-in-out"],
+                // [
+                //   'before:absolute before:inset-x-0 before:top-11 before:z-10 before:h-1 before:-translate-x-full before:bg-ui-primary-default before:transition-all before:duration-300 before:ease-in-out before:content-[""] before:hover:translate-x-0',
+                // ],
+                {
+                  "text-ui-primary-default": isActive
+                },
+                className
+              ),
+              ...props,
+              children: [
+                icon,
+                /* @__PURE__ */ jsx38("p", { children }),
+                /* @__PURE__ */ jsx38(motion2.div, { className: "absolute inset-x-0 top-11 z-50 h-1 -translate-x-full bg-ui-primary-default transition-all duration-300 ease-in-out group-hover:translate-x-0" }),
+                Boolean(enableLeftIcon) && /* @__PURE__ */ jsx38(
+                  Lucide2ChevronDownIcon_default,
+                  {
+                    className: cn(
+                      ["mt-0.5 size-4"],
+                      ["transition duration-300 ease-in-out"],
+                      ["group-hover:rotate-180"]
+                    ),
+                    color: isActive ? "currentColor" : "#434349"
+                  }
+                )
+              ]
+            }
+          )
         }
       );
     }
@@ -1746,6 +1758,7 @@ var Navbar_default = NavbarItem;
 import React2 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, Circle } from "lucide-react";
+import { motion as motion3 } from "framer-motion";
 import { jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
 var { Root: DropdownMenu } = DropdownMenuPrimitive;
 var { Group: DropdownMenuGroup } = DropdownMenuPrimitive;
@@ -1753,17 +1766,24 @@ var { Portal: DropdownMenuPortal } = DropdownMenuPrimitive;
 var { Sub: DropdownMenuSub } = DropdownMenuPrimitive;
 var { RadioGroup: DropdownMenuRadioGroup } = DropdownMenuPrimitive;
 var DropdownMenuTrigger = React2.forwardRef(({ className = "", children, ...props }, reference) => /* @__PURE__ */ jsx39(
-  DropdownMenuPrimitive.Trigger,
+  motion3.div,
   {
-    ...props,
-    ref: reference,
-    className: cn(
-      "flex select-none gap-x-2 overflow-hidden rounded-lg px-2 py-1 outline-none",
-      "hover:bg-neutral-200",
-      "transition-colors duration-300 ease-in-out",
-      className
-    ),
-    children
+    whileHover: {
+      backgroundColor: "rgba(0, 0, 0, 0.05)"
+    },
+    className: "rounded-lg",
+    children: /* @__PURE__ */ jsx39(
+      DropdownMenuPrimitive.Trigger,
+      {
+        ...props,
+        ref: reference,
+        className: cn(
+          "flex select-none gap-x-2 overflow-hidden rounded-lg px-2 py-1 outline-none",
+          className
+        ),
+        children
+      }
+    )
   }
 ));
 DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName;
@@ -1808,6 +1828,7 @@ DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayNam
 var DropdownMenuContent = React2.forwardRef(({ className, sideOffset = 4, ...props }, reference) => /* @__PURE__ */ jsx39(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx39(
   DropdownMenuPrimitive.Content,
   {
+    ...props,
     ref: reference,
     sideOffset,
     className: cn(
@@ -1823,12 +1844,11 @@ var DropdownMenuContent = React2.forwardRef(({ className, sideOffset = 4, ...pro
       "data-[side=bottom]:slide-in-from-top-2",
       "data-[side=left]:slide-in-from-right-2",
       className
-    ),
-    ...props
+    )
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React2.forwardRef(({ className, inset, ...props }, reference) => /* @__PURE__ */ jsx39(
+var DropdownMenuItem = React2.forwardRef(({ className, inset, ...props }, reference) => /* @__PURE__ */ jsx39(motion3.div, { whileHover: { scale: 1.05 }, whileTap: { scale: 0.9 }, children: /* @__PURE__ */ jsx39(
   DropdownMenuPrimitive.Item,
   {
     ref: reference,
@@ -1843,7 +1863,7 @@ var DropdownMenuItem = React2.forwardRef(({ className, inset, ...props }, refere
     ),
     ...props
   }
-));
+) }));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 var DropdownMenuCheckboxItem = React2.forwardRef(({ className, children, checked, ...props }, reference) => /* @__PURE__ */ jsxs21(
   DropdownMenuPrimitive.CheckboxItem,
@@ -2915,31 +2935,20 @@ import { forwardRef as forwardRef9, memo as memo7 } from "react";
 import { jsx as jsx48, jsxs as jsxs24 } from "react/jsx-runtime";
 var UserAvatarTriggerButton = memo7(
   forwardRef9(({ user, focused, ...props }, reference) => {
-    return /* @__PURE__ */ jsxs24(
-      Flex_default,
-      {
-        px: 2,
-        py: 1,
-        gap: 2,
-        ref: reference,
-        ...props,
-        className: String(focused ? "bg-neutral-200" : ""),
-        children: [
-          /* @__PURE__ */ jsx48(UserAvatar_default, { size: 32, fullname: user.fullname, email: user.email, src: user.avatar }),
-          /* @__PURE__ */ jsx48("p", { className: "text-ui-p font-semibold text-ui-text-800", children: user.username }),
-          /* @__PURE__ */ jsx48(
-            Lucide2ChevronDownIcon_default,
-            {
-              size: 16,
-              className: cn(
-                "transform transition-transform duration-300 ease-in-out",
-                focused ? "rotate-180" : "rotate-0"
-              )
-            }
+    return /* @__PURE__ */ jsxs24(Flex_default, { px: "2", py: "1", gap: "3", ref: reference, ...props, children: [
+      /* @__PURE__ */ jsx48(UserAvatar_default, { size: 32, fullname: user.fullname, email: user.email, src: user.avatar }),
+      /* @__PURE__ */ jsx48("p", { className: "text-ui-p font-semibold text-ui-text-800", children: user.username }),
+      /* @__PURE__ */ jsx48(
+        Lucide2ChevronDownIcon_default,
+        {
+          size: 16,
+          className: cn(
+            "transform transition-transform duration-300 ease-in-out",
+            focused ? "rotate-180" : "rotate-0"
           )
-        ]
-      }
-    );
+        }
+      )
+    ] });
   })
 );
 UserAvatarTriggerButton.displayName = "UserAvatarTriggerButton";
@@ -3006,6 +3015,7 @@ import {
 } from "react";
 
 // packages/Molecules/AuthenForm/components/EmailInput/index.tsx
+import { motion as motion4 } from "framer-motion";
 import {
   forwardRef as forwardRef10,
   memo as memo9,
@@ -3072,7 +3082,7 @@ var EmailInput = memo9(
       );
     }, [errorMessage]);
     return /* @__PURE__ */ jsxs26(
-      "div",
+      motion4.div,
       {
         ref: reference,
         className: cn(

package/dist/{types-BUTht_HJ.d.ts → types-DdUenP1k.d.ts}

@@ -15,4 +15,4 @@ type TUser = {
 };
 type TUserSettingSelect = 'FAVORITE' | 'PROFILE' | 'ADDRESS' | 'LOGOUT';
 
-export type { IIconProps as I, TUserSettingSelect as T, TUser as a };
+export type { IIconProps as I, TUser as T, TUserSettingSelect as a };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@customafk/lunas-ui",
   "private": false,
-  "version": "0.0.0-v",
+  "version": "0.0.0-x",
   "type": "module",
   "homepage": "https://docs.customafk.com",
   "repository": {
@@ -119,6 +119,7 @@
     "@radix-ui/react-toast": "^1.2.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "framer-motion": "^11.11.8",
     "lucide-react": "^0.424.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",