@codefast/ui 0.3.16-canary.3 → 0.4.0-canary.4

package/src/components/sheet.tsx

@@ -1,14 +1,12 @@
-"use client";
+import { XIcon } from "lucide-react";
+import { Dialog as SheetPrimitive } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
 
+import { cn } from "#/lib/utils";
 import type { ButtonVariants } from "#/variants/button";
 import { buttonVariants } from "#/variants/button";
 import type { SheetContentVariants } from "#/variants/sheet";
 import { sheetContentVariants } from "#/variants/sheet";
-import type { ComponentProps, JSX } from "react";
-
-import { cn } from "#/lib/utils";
-import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
 
 /* -----------------------------------------------------------------------------
  * Component: Sheet
@@ -22,12 +20,8 @@ type SheetProps = ComponentProps<typeof SheetPrimitive.Root>;
 /**
  * @since 0.3.16-canary.0
  */
-function Sheet({ children, ...props }: SheetProps): JSX.Element {
-  return (
-    <SheetPrimitive.Root data-slot="sheet" {...props}>
-      {children}
-    </SheetPrimitive.Root>
-  );
+function Sheet({ ...props }: SheetProps): JSX.Element {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -53,13 +47,8 @@ function SheetTrigger({ ...props }: SheetTriggerProps): JSX.Element {
 /**
  * @since 0.3.16-canary.0
  */
-interface SheetContentProps
-  extends ComponentProps<typeof SheetPrimitive.Content>, SheetContentVariants {
-  classNames?: {
-    close?: string;
-    content?: string;
-    overlay?: string;
-  };
+interface SheetContentProps extends ComponentProps<typeof SheetPrimitive.Content>, SheetContentVariants {
+  showCloseButton?: boolean;
 }
 
 /**
@@ -68,40 +57,38 @@ interface SheetContentProps
 function SheetContent({
   children,
   className,
-  classNames,
+  showCloseButton = true,
   side = "right",
   ...props
 }: SheetContentProps): JSX.Element {
   return (
-    <SheetPrimitive.Portal>
+    <SheetPrimitive.Portal data-slot="sheet-portal">
       <SheetPrimitive.Overlay
-        className={cn(
-          "fixed inset-0 z-50",
-          "bg-black/40 backdrop-blur-sm",
-          "ease-gentle data-open:animate-in data-open:animation-duration-380 data-open:fade-in-0",
-          "data-closed:animate-out data-closed:animation-duration-280 data-closed:fade-out-0",
-          "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0",
-          classNames?.overlay,
-        )}
+        className={
+          "fixed inset-0 z-50 bg-black/10 ease-gentle supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:animation-duration-panel-in data-open:fade-in-0 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-panel-out data-closed:fade-out-0"
+        }
         data-slot="sheet-overlay"
       />
       <SheetPrimitive.Content
-        className={sheetContentVariants({ className: [classNames?.content, className], side })}
+        className={sheetContentVariants({ className, side })}
+        data-side={side}
         data-slot="sheet-content"
         {...props}
       >
         {children}
-        <SheetPrimitive.Close
-          className={buttonVariants({
-            className: ["absolute top-4 right-4 size-7", classNames?.close],
-            size: "icon",
-            variant: "ghost",
-          })}
-          data-slot="sheet-close"
-        >
-          <XIcon className="size-4" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
+        {showCloseButton ? (
+          <SheetPrimitive.Close
+            className={buttonVariants({
+              className: "absolute top-4 right-4",
+              size: "icon-sm",
+              variant: "ghost",
+            })}
+            data-slot="sheet-close"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        ) : null}
       </SheetPrimitive.Content>
     </SheetPrimitive.Portal>
   );
@@ -120,17 +107,7 @@ type SheetHeaderProps = ComponentProps<"div">;
  * @since 0.3.16-canary.0
  */
 function SheetHeader({ className, ...props }: SheetHeaderProps): JSX.Element {
-  return (
-    <header
-      className={cn(
-        "flex shrink-0 flex-col gap-1.5 px-6 pt-6 pb-4 text-center",
-        "sm:text-left",
-        className,
-      )}
-      data-slot="sheet-header"
-      {...props}
-    />
-  );
+  return <div className={cn("flex shrink-0 flex-col gap-1.5 p-4", className)} data-slot="sheet-header" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -138,6 +115,10 @@ function SheetHeader({ className, ...props }: SheetHeaderProps): JSX.Element {
  * -------------------------------------------------------------------------- */
 
 /**
+ * Optional scrollable region for long content. When used, the Header and Footer
+ * stay pinned (shrink-0) and only this body scrolls. A codefast enhancement over
+ * radix-vega.
+ *
  * @since 0.3.16-canary.0
  */
 type SheetBodyProps = ComponentProps<"div">;
@@ -146,13 +127,7 @@ type SheetBodyProps = ComponentProps<"div">;
  * @since 0.3.16-canary.0
  */
 function SheetBody({ className, ...props }: SheetBodyProps): JSX.Element {
-  return (
-    <main
-      className={cn("overflow-auto", "px-6 py-2", className)}
-      data-slot="sheet-body"
-      {...props}
-    />
-  );
+  return <div className={cn("min-h-0 flex-1 overflow-y-auto px-4", className)} data-slot="sheet-body" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -169,15 +144,7 @@ type SheetFooterProps = ComponentProps<"div">;
  */
 function SheetFooter({ className, ...props }: SheetFooterProps): JSX.Element {
   return (
-    <footer
-      className={cn(
-        "flex shrink-0 flex-col-reverse gap-2 px-6 pt-4 pb-6",
-        "sm:flex-row sm:justify-end",
-        className,
-      )}
-      data-slot="sheet-footer"
-      {...props}
-    />
+    <div className={cn("mt-auto flex shrink-0 flex-col gap-2 p-4", className)} data-slot="sheet-footer" {...props} />
   );
 }
 
@@ -196,7 +163,7 @@ type SheetTitleProps = ComponentProps<typeof SheetPrimitive.Title>;
 function SheetTitle({ className, ...props }: SheetTitleProps): JSX.Element {
   return (
     <SheetPrimitive.Title
-      className={cn("text-lg font-semibold text-foreground", className)}
+      className={cn("font-heading font-medium text-foreground", className)}
       data-slot="sheet-title"
       {...props}
     />
@@ -242,11 +209,7 @@ interface SheetCloseProps extends ComponentProps<typeof SheetPrimitive.Close> {
  */
 function SheetClose({ className, size, variant, ...props }: SheetCloseProps): JSX.Element {
   return (
-    <SheetPrimitive.Close
-      className={buttonVariants({ className, size, variant })}
-      data-slot="sheet-close"
-      {...props}
-    />
+    <SheetPrimitive.Close className={buttonVariants({ className, size, variant })} data-slot="sheet-close" {...props} />
   );
 }
 

package/src/components/sidebar.tsx

@@ -1,14 +1,7 @@
-"use client";
-
-import type { SidebarMenuButtonVariants } from "#/variants/sidebar";
-import type { ComponentProps, CSSProperties, Dispatch, JSX, SetStateAction } from "react";
-
-import { cn } from "#/lib/utils";
-
-import { sidebarMenuButtonVariants } from "#/variants/sidebar";
-import { createContext } from "@radix-ui/react-context";
-import { Slot } from "@radix-ui/react-slot";
 import { PanelLeftIcon } from "lucide-react";
+import { Slot } from "radix-ui";
+import { Context } from "radix-ui/internal";
+import type { ComponentProps, CSSProperties, Dispatch, JSX, SetStateAction } from "react";
 import { useCallback, useEffect, useState } from "react";
 
 import { Button } from "#/components/button";
@@ -18,6 +11,9 @@ import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "
 import { Skeleton } from "#/components/skeleton";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "#/components/tooltip";
 import { useIsMobile } from "#/hooks/use-is-mobile";
+import { cn } from "#/lib/utils";
+import type { SidebarMenuButtonVariants } from "#/variants/sidebar";
+import { sidebarMenuButtonVariants } from "#/variants/sidebar";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -42,8 +38,7 @@ interface SidebarContextValue {
 
 const SIDEBAR_PROVIDER_NAME = "SidebarProvider";
 
-const [SidebarContextProvider, useSidebar] =
-  createContext<SidebarContextValue>(SIDEBAR_PROVIDER_NAME);
+const [SidebarContextProvider, useSidebar] = Context.createContext<SidebarContextValue>(SIDEBAR_PROVIDER_NAME);
 
 /* -----------------------------------------------------------------------------
  * Component: SidebarProvider
@@ -134,11 +129,7 @@ function SidebarProvider({
     >
       <TooltipProvider delayDuration={0}>
         <div
-          className={cn(
-            "group/sidebar-wrapper flex min-h-svh w-full",
-            "has-data-[variant=inset]:bg-sidebar",
-            className,
-          )}
+          className={cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className)}
           data-slot="sidebar-wrapper"
           style={
             {
@@ -187,11 +178,7 @@ function Sidebar({
   if (collapsible === "none") {
     return (
       <div
-        className={cn(
-          "flex h-full w-(--sidebar-width) flex-col",
-          "bg-sidebar text-sidebar-foreground",
-          className,
-        )}
+        className={cn("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", className)}
         data-slot="sidebar"
         {...props}
       >
@@ -204,11 +191,7 @@ function Sidebar({
     return (
       <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
         <SheetContent
-          className={cn(
-            "w-(--sidebar-width) p-0",
-            "bg-sidebar text-sidebar-foreground",
-            "[&>button]:hidden",
-          )}
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
           data-mobile="true"
           data-sidebar="sidebar"
           data-slot="sidebar"
@@ -231,7 +214,7 @@ function Sidebar({
 
   return (
     <div
-      className={cn("group peer hidden", "text-sidebar-foreground", "md:block", className)}
+      className={cn("group peer hidden text-sidebar-foreground md:block", className)}
       data-collapsible={state === "collapsed" ? collapsible : ""}
       data-side={side}
       data-slot="sidebar"
@@ -241,13 +224,7 @@ function Sidebar({
       {/* This is what handles the sidebar gap on desktop */}
       <div
         className={cn(
-          "relative",
-          "w-(--sidebar-width)",
-          "bg-transparent",
-          "transition-[width] duration-200 ease-linear",
-          "motion-reduce:transition-none motion-reduce:duration-0",
-          "group-data-[collapsible=offcanvas]:w-0",
-          "group-data-side-right:rotate-180",
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-gentle group-data-[collapsible=offcanvas]:w-0 group-data-side-right:rotate-180",
           variant === "floating" || variant === "inset"
             ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
             : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
@@ -256,28 +233,18 @@ function Sidebar({
       />
       <div
         className={cn(
-          "fixed inset-y-0 z-10 hidden",
-          "h-svh w-(--sidebar-width)",
-          "transition-[left,right,width] duration-200 ease-linear",
-          "motion-reduce:transition-none motion-reduce:duration-0",
-          "md:flex",
-          side === "left"
-            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-gentle md:flex data-side-right:right-0 data-side-right:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] data-side-left:left-0 data-side-left:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]",
           variant === "floating" || variant === "inset"
             ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
             : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-side-right:border-l group-data-side-left:border-r",
           className,
         )}
+        data-side={side}
         data-slot="sidebar-container"
         {...props}
       >
         <div
-          className={cn(
-            "flex h-full w-full flex-col",
-            "bg-sidebar",
-            "group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm",
-          )}
+          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
         >
@@ -302,15 +269,14 @@ type SidebarTriggerProps = ComponentProps<typeof Button>;
 /**
  * @since 0.3.16-canary.0
  */
-function SidebarTrigger({ className, onClick, ...props }: SidebarTriggerProps): JSX.Element {
+function SidebarTrigger({ onClick, ...props }: SidebarTriggerProps): JSX.Element {
   const { toggleSidebar } = useSidebar(SIDEBAR_TRIGGER_NAME);
 
   return (
     <Button
-      className={cn("size-7", className)}
       data-sidebar="trigger"
       data-slot="sidebar-trigger"
-      size="icon"
+      size="icon-sm"
       variant="ghost"
       onClick={(event) => {
         onClick?.(event);
@@ -318,7 +284,7 @@ function SidebarTrigger({ className, onClick, ...props }: SidebarTriggerProps):
       }}
       {...props}
     >
-      <PanelLeftIcon />
+      <PanelLeftIcon className="rtl:rotate-180" />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   );
@@ -344,23 +310,7 @@ function SidebarRail({ className, ...props }: SidebarRailProps): JSX.Element {
   return (
     <button
       className={cn(
-        "absolute inset-y-0 z-20 hidden",
-        "w-4 -translate-x-1/2 transition-all ease-linear",
-        "motion-reduce:transition-none",
-        "in-data-side-right:cursor-e-resize",
-        "in-data-side-left:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:translate-x-0",
-        "group-data-side-right:left-0",
-        "group-data-side-left:-right-4",
-        "after:absolute after:inset-y-0 after:left-1/2 after:w-0.5",
-        "group-data-[collapsible=offcanvas]:after:left-full",
-        "hover:group-data-[collapsible=offcanvas]:bg-sidebar",
-        "hover:after:bg-sidebar-border",
-        "sm:flex",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        "[[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-gentle group-data-[collapsible=offcanvas]:translate-x-0 group-data-side-right:left-0 group-data-side-left:-right-4 after:absolute after:inset-y-0 after:inset-s-1/2 after:w-0.5 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar hover:after:bg-sidebar-border in-data-side-right:cursor-e-resize in-data-side-left:cursor-w-resize sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2 [[data-side=left][data-collapsible=offcanvas]_&]:-right-2 [[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-collapsible=offcanvas]_&]:-left-2 [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
         className,
       )}
       data-sidebar="rail"
@@ -389,10 +339,7 @@ function SidebarInset({ className, ...props }: SidebarInsetProps): JSX.Element {
   return (
     <main
       className={cn(
-        "relative flex w-full min-w-0 flex-1 flex-col",
-        "bg-background",
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
-        "md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-collapsed:ml-2",
         className,
       )}
       data-slot="sidebar-inset"
@@ -416,7 +363,7 @@ type SidebarInputProps = ComponentProps<typeof Input>;
 function SidebarInput({ className, ...props }: SidebarInputProps): JSX.Element {
   return (
     <Input
-      className={cn("h-8 w-full", "bg-background shadow-none", className)}
+      className={cn("h-8 w-full bg-background shadow-none", className)}
       data-sidebar="input"
       data-slot="sidebar-input"
       {...props}
@@ -439,7 +386,7 @@ type SidebarHeaderProps = ComponentProps<"div">;
 function SidebarHeader({ className, ...props }: SidebarHeaderProps): JSX.Element {
   return (
     <div
-      className={cn("flex flex-col gap-2", "p-2", className)}
+      className={cn("flex flex-col gap-2 p-2", className)}
       data-sidebar="header"
       data-slot="sidebar-header"
       {...props}
@@ -462,7 +409,7 @@ type SidebarFooterProps = ComponentProps<"div">;
 function SidebarFooter({ className, ...props }: SidebarFooterProps): JSX.Element {
   return (
     <div
-      className={cn("flex flex-col gap-2", "p-2", className)}
+      className={cn("flex flex-col gap-2 p-2", className)}
       data-sidebar="footer"
       data-slot="sidebar-footer"
       {...props}
@@ -485,7 +432,7 @@ type SidebarSeparatorProps = ComponentProps<typeof Separator>;
 function SidebarSeparator({ className, ...props }: SidebarSeparatorProps): JSX.Element {
   return (
     <Separator
-      className={cn("mx-2 w-auto", "bg-sidebar-border", className)}
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
       data-sidebar="separator"
       data-slot="sidebar-separator"
       {...props}
@@ -509,8 +456,7 @@ function SidebarContent({ className, ...props }: SidebarContentProps): JSX.Eleme
   return (
     <div
       className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto",
-        "group-data-[collapsible=icon]:overflow-hidden",
+        "flex min-h-0 flex-1 scrollbar-none flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
         className,
       )}
       data-sidebar="content"
@@ -535,7 +481,7 @@ type SidebarGroupProps = ComponentProps<"div">;
 function SidebarGroup({ className, ...props }: SidebarGroupProps): JSX.Element {
   return (
     <div
-      className={cn("relative flex w-full min-w-0 flex-col", "p-2", className)}
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
       data-sidebar="group"
       data-slot="sidebar-group"
       {...props}
@@ -557,24 +503,13 @@ interface SidebarGroupLabelProps extends ComponentProps<"div"> {
 /**
  * @since 0.3.16-canary.0
  */
-function SidebarGroupLabel({
-  asChild = false,
-  className,
-  ...props
-}: SidebarGroupLabelProps): JSX.Element {
-  const Component = asChild ? Slot : "div";
+function SidebarGroupLabel({ asChild = false, className, ...props }: SidebarGroupLabelProps): JSX.Element {
+  const Component = asChild ? Slot.Root : "div";
 
   return (
     <Component
       className={cn(
-        "flex h-8 shrink-0 items-center px-2",
-        "rounded-md ring-sidebar-ring outline-hidden",
-        "truncate text-xs font-medium text-sidebar-foreground/70",
-        "transition-[margin,opacity] duration-200 ease-linear",
-        "motion-reduce:transition-none motion-reduce:duration-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        "focus-visible:ring-3",
-        "[&>svg]:size-4 [&>svg]:shrink-0",
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-gentle group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         className,
       )}
       data-sidebar="group-label"
@@ -598,27 +533,13 @@ interface SidebarGroupActionProps extends ComponentProps<"button"> {
 /**
  * @since 0.3.16-canary.0
  */
-function SidebarGroupAction({
-  asChild = false,
-  className,
-  ...props
-}: SidebarGroupActionProps): JSX.Element {
-  const Component = asChild ? Slot : "button";
+function SidebarGroupAction({ asChild = false, className, ...props }: SidebarGroupActionProps): JSX.Element {
+  const Component = asChild ? Slot.Root : "button";
 
   return (
     <Component
       className={cn(
-        "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center p-0",
-        "rounded-md ring-sidebar-ring outline-hidden",
-        "text-sidebar-foreground",
-        "transition-transform",
-        "motion-reduce:transition-none",
-        "group-data-[collapsible=icon]:hidden",
-        "after:absolute after:-inset-2",
-        "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        "focus-visible:ring-3",
-        "md:after:hidden",
-        "[&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
         className,
       )}
       data-sidebar="group-action"
@@ -643,7 +564,7 @@ type SidebarGroupContentProps = ComponentProps<"div">;
 function SidebarGroupContent({ className, ...props }: SidebarGroupContentProps): JSX.Element {
   return (
     <div
-      className={cn("w-full", "text-sm", className)}
+      className={cn("w-full text-sm", className)}
       data-sidebar="group-content"
       data-slot="sidebar-group-content"
       {...props}
@@ -719,17 +640,17 @@ function SidebarMenuButton({
   asChild = false,
   className,
   isActive = false,
-  size = "md",
+  size = "default",
   tooltip,
   variant = "default",
   ...props
 }: SidebarMenuButtonProps): JSX.Element {
-  const Component = asChild ? Slot : "button";
+  const Component = asChild ? Slot.Root : "button";
   const { isMobile, state } = useSidebar(SIDEBAR_MENU_BUTTON_NAME);
 
   const button = (
     <Component
-      className={cn(sidebarMenuButtonVariants({ size, variant }), className)}
+      className={sidebarMenuButtonVariants({ size, variant, className })}
       data-active={isActive}
       data-sidebar="menu-button"
       data-size={size}
@@ -751,12 +672,7 @@ function SidebarMenuButton({
   return (
     <Tooltip>
       <TooltipTrigger asChild>{button}</TooltipTrigger>
-      <TooltipContent
-        align="center"
-        hidden={state !== "collapsed" || isMobile}
-        side="right"
-        {...tooltip}
-      />
+      <TooltipContent align="center" hidden={state !== "collapsed" || isMobile} side="right" {...tooltip} />
     </Tooltip>
   );
 }
@@ -782,28 +698,14 @@ function SidebarMenuAction({
   showOnHover = false,
   ...props
 }: SidebarMenuActionProps): JSX.Element {
-  const Component = asChild ? Slot : "button";
+  const Component = asChild ? Slot.Root : "button";
 
   return (
     <Component
       className={cn(
-        "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center p-0",
-        "rounded-md ring-sidebar-ring outline-hidden",
-        "text-sidebar-foreground",
-        "transition-transform",
-        "motion-reduce:transition-none",
-        "group-data-[collapsible=icon]:hidden",
-        "peer-hover/menu-button:text-sidebar-accent-foreground",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "after:absolute after:-inset-2",
-        "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        "focus-visible:ring-3",
-        "md:after:hidden",
-        "[&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
         showOnHover &&
-          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground md:opacity-0 data-open:opacity-100",
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
         className,
       )}
       data-sidebar="menu-action"
@@ -829,16 +731,7 @@ function SidebarMenuBadge({ className, ...props }: SidebarMenuBadgeProps): JSX.E
   return (
     <div
       className={cn(
-        "absolute right-1 flex h-5 min-w-5 items-center justify-center px-1",
-        "rounded-md",
-        "text-xs font-medium text-sidebar-foreground tabular-nums",
-        "pointer-events-none select-none",
-        "group-data-[collapsible=icon]:hidden",
-        "peer-hover/menu-button:text-sidebar-accent-foreground",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-active/menu-button:text-sidebar-accent-foreground",
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
         className,
       )}
       data-sidebar="menu-badge"
@@ -862,24 +755,18 @@ interface SidebarMenuSkeletonProps extends ComponentProps<"div"> {
 /**
  * @since 0.3.16-canary.0
  */
-function SidebarMenuSkeleton({
-  className,
-  showIcon = false,
-  ...props
-}: SidebarMenuSkeletonProps): JSX.Element {
+function SidebarMenuSkeleton({ className, showIcon = false, ...props }: SidebarMenuSkeletonProps): JSX.Element {
   // Random width between 50 to 90% - use useState with lazy initializer to avoid calling Math.random during render
   const [width] = useState(() => `${String(Math.floor(Math.random() * 40) + 50)}%`);
 
   return (
     <div
-      className={cn("flex h-8 items-center gap-2 px-2", "rounded-md", className)}
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
       data-sidebar="menu-skeleton"
       data-slot="sidebar-menu-skeleton"
       {...props}
     >
-      {showIcon ? (
-        <Skeleton className={cn("size-4", "rounded-md")} data-sidebar="menu-skeleton-icon" />
-      ) : null}
+      {showIcon ? <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" /> : null}
       <Skeleton
         className="h-4 max-w-(--skeleton-width) flex-1"
         data-sidebar="menu-skeleton-text"
@@ -909,10 +796,7 @@ function SidebarMenuSub({ className, ...props }: SidebarMenuSubProps): JSX.Eleme
   return (
     <ul
       className={cn(
-        "mx-3.5 flex min-w-0 flex-col gap-1 px-2.5 py-0.5",
-        "border-l border-sidebar-border",
-        "translate-x-px",
-        "group-data-[collapsible=icon]:hidden",
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
         className,
       )}
       data-sidebar="menu-sub"
@@ -968,26 +852,12 @@ function SidebarMenuSubButton({
   size = "md",
   ...props
 }: SidebarMenuSubButtonProps): JSX.Element {
-  const Component = asChild ? Slot : "a";
+  const Component = asChild ? Slot.Root : "a";
 
   return (
     <Component
       className={cn(
-        "flex h-7 min-w-0 items-center gap-2 overflow-hidden px-2",
-        "rounded-md ring-sidebar-ring outline-hidden",
-        "text-sidebar-foreground",
-        "-translate-x-px",
-        "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        "focus-visible:ring-3",
-        "active:bg-sidebar-accent active:text-sidebar-accent-foreground",
-        "disabled:pointer-events-none disabled:opacity-50",
-        "aria-disabled:pointer-events-none aria-disabled:opacity-50",
-        "data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground",
-        "group-data-[collapsible=icon]:hidden",
-        "[&>span:last-child]:truncate",
-        "[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
-        size === "sm" && "text-xs",
-        size === "md" && "text-sm",
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
         className,
       )}
       data-active={isActive}

package/src/components/skeleton.tsx

@@ -18,9 +18,7 @@ function Skeleton({ className, ...props }: SkeletonProps): JSX.Element {
   return (
     <div
       className={cn(
-        "rounded-lg",
-        "bg-gradient-to-r from-muted via-white/15 to-muted bg-[length:400%_100%]",
-        "animate-shimmer motion-reduce:animate-none",
+        "animate-shimmer rounded-md bg-linear-to-r from-muted via-white/15 to-muted bg-size-[400%_100%]",
         className,
       )}
       data-slot="skeleton"