style: update styles for menu item hover, linkable, and affix variant…

…s for better visual consistency and user experience.

package.json

@@ -7,7 +7,7 @@
   "author": {
     "name": "Piotr Kulpinski",
     "email": "piotr@kulpinski.pl",
-    "url": "https://kulpinski.co"
+    "url": "https://kulpinski.pl"
   },
   "repository": "curious-leaf/design",
   "main": "./src/index.ts",
@@ -24,7 +24,7 @@
     "format": "bun biome format --write ."
   },
   "dependencies": {
-    "@curiousleaf/utils": "^1.0.15",
+    "@curiousleaf/utils": "link:@curiousleaf/utils",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",

src/layout/Sidebar/Sidebar.tsx

@@ -20,12 +20,12 @@ export type SidebarElement = HTMLDivElement
 export type SidebarProps = HTMLAttributes<SidebarElement> & VariantProps<typeof sidebarVariants>
 
 export const SidebarBase = forwardRef<SidebarElement, SidebarProps>((props, ref) => {
-  const { className, theme, size, floating, sticky, ...rest } = props
+  const { className, size, sticky, ...rest } = props
 
   return (
     <div
       ref={ref}
-      className={cx(sidebarVariants({ theme, size, floating, sticky, className }))}
+      className={cx(sidebarVariants({ size, sticky, className }))}
       {...rest}
     />
   )
@@ -46,7 +46,7 @@ export const SidebarMenu = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElem
 )
 
 export const SidebarHeading = forwardRef<SubheadingElement, SubheadingProps>((props, ref) => {
-  const { className, size = "sm", ...rest } = props
+  const { className, size = "xs", ...rest } = props
 
   return (
     <Subheading
@@ -77,9 +77,7 @@ export const Sidebar = Object.assign(SidebarBase, {
 })
 
 Sidebar.defaultProps = {
-  theme: "white",
   size: "md",
-  floating: false,
   sticky: true,
 }
 

src/layout/Sidebar/Sidebar.variants.ts

@@ -1,37 +1,22 @@
 import { cva } from "../../shared"
 
 export const sidebarVariants = cva({
-  base: "@container/sidebar flex shrink-0 flex-col gap-y-5 p-5 -m-px border",
+  base: "@container/sidebar flex shrink-0 flex-col gap-y-5 p-4",
 
   variants: {
-    theme: {
-      white: "bg-white",
-      gray: "bg-gray-50",
-    },
     size: {
       sm: "w-56",
       md: "w-64",
       lg: "w-72",
     },
-    floating: {
-      true: "m-2 rounded-md shadow-sm",
-      false: "mr-0",
-    },
     sticky: {
-      true: "sticky",
+      true: "sticky inset-y-0 h-screen",
       false: "relative",
     },
   },
 
-  compoundVariants: [
-    { floating: true, sticky: true, class: "inset-y-2 h-[calc(100dvh-1rem)]" },
-    { floating: false, sticky: true, class: "-inset-y-px h-[calc(100dvh+2px)]" },
-  ],
-
   defaultVariants: {
-    theme: "white",
     size: "md",
-    floating: false,
     sticky: true,
   },
 })
@@ -45,7 +30,7 @@ export const sidebarMenuVariants = cva({
 })
 
 export const sidebarHeadingVariants = cva({
-  base: "p-1 opacity-40",
+  base: "p-1 pl-3 opacity-40",
 })
 
 export const sidebarSeparatorVariants = cva({

src/ui/Accordion/Accordion.variants.ts

@@ -2,7 +2,7 @@ import { cva } from "../../shared"
 
 export const accordionVariants = cva({
   base: [
-    "overflow-hidden transition-all",
+    "overflow-hidden transition-all !duration-200",
     "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
   ],
 })

src/ui/Button/Button.variants.ts

@@ -2,7 +2,7 @@ import { cva, focusClasses } from "../../shared"
 
 export const buttonVariants = cva({
   base: [
-    "relative inline-flex items-center justify-center border border-transparent font-medium leading-icon rounded-md shadow-sm hover:z-10",
+    "relative inline-flex items-center justify-center border border-transparent font-medium leading-icon rounded-md shadow-sm transition hover:z-10",
     "disabled:opacity-60 disabled:pointer-events-none",
     focusClasses,
   ],

src/ui/MenuItem/MenuItem.tsx

@@ -4,7 +4,6 @@ import { Slot } from "@radix-ui/react-slot"
 import { forwardRef } from "react"
 import type { ButtonHTMLAttributes, ReactNode } from "react"
 
-import { IconChevronRight } from "../../icons/IconChevronRight"
 import { IconSpinner } from "../../icons/IconSpinner"
 import { type VariantProps, cx, isChildrenEmpty, isReactElement, toArrayOrWrap } from "../../shared"
 import { Affixable } from "../../utils/Affixable"
@@ -68,10 +67,6 @@ export const MenuItem = forwardRef<MenuItemElement, MenuItemProps>((props, ref)
     suffix.push(<IconSpinner className="text-xs" />)
   }
 
-  if (isActive && !suffix.length) {
-    suffix.push(<IconChevronRight className="text-xs" />)
-  }
-
   return (
     <Component
       ref={ref}

src/ui/MenuItem/MenuItem.variants.ts

@@ -5,7 +5,7 @@ export const menuItemVariants = cva({
     "group/menu-item relative flex items-center gap-2.5 min-w-0 rounded-md font-medium text-start",
 
     // Interactive
-    "hover:bg-gray-100 group-data-[state=open]:hover:bg-transparent group-data-[state=open]:focus:bg-gray-100 group-data-[state=open]:outline-none",
+    "hover:bg-black/[0.03] group-data-[state=open]:hover:bg-transparent group-data-[state=open]:focus:bg-black/[0.04] group-data-[state=open]:outline-none",
 
     // Disabled
     "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none",
@@ -21,15 +21,15 @@ export const menuItemVariants = cva({
     },
     size: {
       sm: "px-2.5 py-1.5 text-xs",
-      md: "px-3 py-2 text-sm",
+      md: "px-3 py-1.5 text-sm",
     },
     linkable: {
       true: [
         // Pseudo
-        "before:hidden before:absolute before:right-full before:top-1/2 before:h-2/3 before:w-1 before:mr-4 before:bg-primary before:rounded-r-md before:-translate-y-1/2",
+        "before:hidden before:absolute before:right-full before:top-1/2 before:h-2/3 before:w-1 before:mr-3 before:bg-primary before:rounded-r-md before:-translate-y-1/2",
 
         // Active
-        "aria-[current=page]:bg-gray-100 aria-[current=page]:text-gray-800 aria-[current=page]:before:block",
+        "aria-[current=page]:bg-white aria-[current=page]:shadow-[0px_2px_3px_-1px_rgba(0,_0,_0,_0.04),_0px_1px_0px_0px_rgba(25,_28,_33,_0.01),_0px_0px_0px_1px_rgba(25,_28,_33,_0.04)] aria-[current=page]:text-black aria-[current=page]:before:block",
       ],
     },
   },
@@ -42,5 +42,5 @@ export const menuItemVariants = cva({
 })
 
 export const menuItemAffixVariants = cva({
-  base: "shrink-0 group-aria-[current=page]/menu-item:first:text-primary",
+  base: "shrink-0 [&[viewBox]]:size-[1.2857em] group-aria-[current=page]/menu-item:first:text-primary",
 })