@c-rex/ui 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@c-rex/ui",
-    "version": "0.1.6",
+    "version": "0.1.8",
     "type": "module",
     "files": [
         "src"
@@ -10,6 +10,10 @@
         "access": "public"
     },
     "exports": {
+        "./hooks": {
+            "types": "./src/hooks/index.tsx",
+            "import": "./src/hooks/index.tsx"
+        },
         "./collapsible": {
             "types": "./src/collapsible.tsx",
             "import": "./src/collapsible.tsx"
@@ -18,6 +22,10 @@
             "types": "./src/alert.tsx",
             "import": "./src/alert.tsx"
         },
+        "./drawer": {
+            "types": "./src/drawer.tsx",
+            "import": "./src/drawer.tsx"
+        },
         "./breadcrumb": {
             "types": "./src/breadcrumb.tsx",
             "import": "./src/breadcrumb.tsx"
@@ -152,7 +160,7 @@
         "@radix-ui/react-checkbox": "^1.3.2",
         "@radix-ui/react-collapsible": "^1.1.11",
         "@radix-ui/react-context-menu": "^2.2.15",
-        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.15",
         "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-popover": "^1.1.6",
@@ -173,6 +181,11 @@
         "react-dom": "^18.3.1",
         "sonner": "^2.0.5",
         "tailwind-merge": "^3.3.0",
-        "tw-animate-css": "^1.2.9"
+        "tw-animate-css": "^1.2.9",
+        "vaul": "^1.1.2"
+    },
+    "peerDependencies": {
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1"
     }
 }

package/src/badge.tsx

@@ -5,42 +5,42 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@c-rex/utils"
 
 const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
+    "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+    {
+        variants: {
+            variant: {
+                default:
+                    "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+                secondary:
+                    "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+                destructive:
+                    "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+                outline:
+                    "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    }
 )
 
 function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
+    className,
+    variant,
+    asChild = false,
+    ...props
 }: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span"
+    VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+    const Comp = asChild ? Slot : "span"
 
-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
+    return (
+        <Comp
+            data-slot="badge"
+            className={cn(badgeVariants({ variant }), className)}
+            {...props}
+        />
+    )
 }
 
 export { Badge, badgeVariants }

package/src/drawer.tsx

@@ -0,0 +1,133 @@
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@c-rex/utils"
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

package/src/hooks/index.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import { BREAKPOINTS, DEVICE_OPTIONS } from "@c-rex/constants";
+import { DeviceType } from "@c-rex/types";
+
+
+export const useBreakpoint = (): DeviceType => {
+    const [device, setDevice] = useState<DeviceType>(DEVICE_OPTIONS.MOBILE);
+
+    useEffect(() => {
+        function handleResize() {
+            const width = window.innerWidth;
+
+            if (width < BREAKPOINTS.md) {
+                setDevice(DEVICE_OPTIONS.MOBILE);
+            } else if (width < BREAKPOINTS.lg) {
+                setDevice(DEVICE_OPTIONS.TABLET);
+            } else {
+                setDevice(DEVICE_OPTIONS.DESKTOP);
+            }
+        }
+
+        handleResize();
+        window.addEventListener("resize", handleResize);
+
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+
+    return device;
+};

package/src/sheet.tsx

@@ -80,7 +80,7 @@ const SheetHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
     <div
         className={cn(
-            "flex flex-col space-y-2 text-center sm:text-left",
+            "flex flex-row gap-2 text-center",
             className,
         )}
         {...props}

package/src/sidebar.tsx

@@ -3,19 +3,13 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { VariantProps, cva } from "class-variance-authority";
-import { PanelLeft } from "lucide-react";
+import { Info, PanelLeft } from "lucide-react";
 import { cn } from "@c-rex/utils";
-import { useIsMobile } from "./hooks/use-mobile";
+import { useBreakpoint } from "./hooks";
 import { Button } from "./button";
 import { Input } from "./input";
 import { Separator } from "./separator";
-import {
-    Sheet,
-    SheetContent,
-    SheetDescription,
-    SheetHeader,
-    SheetTitle,
-} from "./sheet";
+import { Sheet, SheetContent } from "./sheet";
 import { Skeleton } from "./skeleton";
 import {
     Tooltip,
@@ -23,15 +17,16 @@ import {
     TooltipProvider,
     TooltipTrigger,
 } from "./tooltip";
+import { DEVICE_OPTIONS } from "@c-rex/constants";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
+const RIGHT_SIDEBAR_WIDTH = "19rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
-const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
-type SidebarContext = {
+type SidebarContextType = {
     state: "expanded" | "collapsed";
     open: boolean;
     setOpen: (open: boolean) => void;
@@ -39,122 +34,153 @@ type SidebarContext = {
     setOpenMobile: (open: boolean) => void;
     isMobile: boolean;
     toggleSidebar: () => void;
+    side: "left" | "right";
+};
+
+type MultiSidebarContextType = {
+    leftSidebar: SidebarContextType;
+    rightSidebar: SidebarContextType;
 };
 
-const SidebarContext = React.createContext<SidebarContext | null>(null);
+const MultiSidebarContext = React.createContext<MultiSidebarContextType | null>(null);
 
-function useSidebar() {
-    const context = React.useContext(SidebarContext);
+function useMultiSidebar() {
+    const context = React.useContext(MultiSidebarContext);
     if (!context) {
-        throw new Error("useSidebar must be used within a SidebarProvider.");
+        throw new Error(
+            "useMultiSidebar must be used within a MultiSidebarProvider."
+        );
     }
-
     return context;
 }
 
-const SidebarProvider = React.forwardRef<
+const MultiSidebarProvider = React.forwardRef<
     HTMLDivElement,
     React.ComponentProps<"div"> & {
-        defaultOpen?: boolean;
-        open?: boolean;
-        onOpenChange?: (open: boolean) => void;
+        defaultLeftOpen?: boolean;
+        defaultRightOpen?: boolean;
+        leftOpen?: boolean;
+        rightOpen?: boolean;
+        onLeftOpenChange?: (open: boolean) => void;
+        onRightOpenChange?: (open: boolean) => void;
     }
 >(
     (
         {
-            defaultOpen = true,
-            open: openProp,
-            onOpenChange: setOpenProp,
+            defaultLeftOpen = true,
+            defaultRightOpen = true,
+            leftOpen: leftOpenProp,
+            rightOpen: rightOpenProp,
+            onLeftOpenChange: setLeftOpenProp,
+            onRightOpenChange: setRightOpenProp,
             className,
             style,
             children,
             ...props
         },
-        ref,
+        ref
     ) => {
-        const isMobile = useIsMobile();
-        const [openMobile, setOpenMobile] = React.useState(false);
-
-        // This is the internal state of the sidebar.
-        // We use openProp and setOpenProp for control from outside the component.
-        const [_open, _setOpen] = React.useState(defaultOpen);
-        const open = openProp ?? _open;
-        const setOpen = React.useCallback(
+        const device = useBreakpoint();
+        const isMobile = (device === DEVICE_OPTIONS.MOBILE || device === DEVICE_OPTIONS.TABLET);
+
+        // Left Sidebar State
+        const [_leftOpen, _setLeftOpen] = React.useState(defaultLeftOpen);
+        const leftOpen = leftOpenProp ?? _leftOpen;
+        const setLeftOpen = React.useCallback(
             (value: boolean | ((value: boolean) => boolean)) => {
-                const openState = typeof value === "function" ? value(open) : value;
-                if (setOpenProp) {
-                    setOpenProp(openState);
+                const openState = typeof value === "function" ? value(leftOpen) : value;
+                if (setLeftOpenProp) {
+                    setLeftOpenProp(openState);
                 } else {
-                    _setOpen(openState);
+                    _setLeftOpen(openState);
                 }
-
-                // This sets the cookie to keep the sidebar state.
-                document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+                document.cookie = `${SIDEBAR_COOKIE_NAME}:left=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
             },
-            [setOpenProp, open],
+            [setLeftOpenProp, leftOpen]
         );
 
-        // Helper to toggle the sidebar.
-        const toggleSidebar = React.useCallback(() => {
-            return isMobile
-                ? setOpenMobile((open) => !open)
-                : setOpen((open) => !open);
-        }, [isMobile, setOpen, setOpenMobile]);
-
-        // Adds a keyboard shortcut to toggle the sidebar.
-        React.useEffect(() => {
-            const handleKeyDown = (event: KeyboardEvent) => {
-                if (
-                    event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-                    (event.metaKey || event.ctrlKey)
-                ) {
-                    event.preventDefault();
-                    toggleSidebar();
+        // Right Sidebar State
+        const [_rightOpen, _setRightOpen] = React.useState(defaultRightOpen);
+        const rightOpen = rightOpenProp ?? _rightOpen;
+        const setRightOpen = React.useCallback(
+            (value: boolean | ((value: boolean) => boolean)) => {
+                const openState =
+                    typeof value === "function" ? value(rightOpen) : value;
+                if (setRightOpenProp) {
+                    setRightOpenProp(openState);
+                } else {
+                    _setRightOpen(openState);
                 }
-            };
-
-            window.addEventListener("keydown", handleKeyDown);
-            return () => window.removeEventListener("keydown", handleKeyDown);
-        }, [toggleSidebar]);
+                document.cookie = `${SIDEBAR_COOKIE_NAME}:right=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+            },
+            [setRightOpenProp, rightOpen]
+        );
 
-        // We add a state so that we can do data-state="expanded" or "collapsed".
-        // This makes it easier to style the sidebar with Tailwind classes.
-        const state = open ? "expanded" : "collapsed";
+        // Mobile state for each sidebar
+        const [leftOpenMobile, setLeftOpenMobile] = React.useState(false);
+        const [rightOpenMobile, setRightOpenMobile] = React.useState(false);
 
-        const contextValue = React.useMemo<SidebarContext>(
+        const toggleLeftSidebar = React.useCallback(() => {
+            return isMobile
+                ? setLeftOpenMobile((open) => !open)
+                : setLeftOpen((open) => !open);
+        }, [isMobile, setLeftOpen, setLeftOpenMobile]);
+        const toggleRightSidebar = React.useCallback(() => {
+            return isMobile
+                ? setRightOpenMobile((open) => !open)
+                : setRightOpen((open) => !open);
+        }, [isMobile, setRightOpen, setRightOpenMobile]);
+        // Sidebar contexts
+        const leftSidebarContext: SidebarContextType = React.useMemo(
             () => ({
-                state,
-                open,
-                setOpen,
+                state: leftOpen ? "expanded" : "collapsed",
+                open: leftOpen,
+                setOpen: setLeftOpen,
+                openMobile: leftOpenMobile,
+                setOpenMobile: setLeftOpenMobile,
                 isMobile,
-                openMobile,
-                setOpenMobile,
-                toggleSidebar,
+                toggleSidebar: toggleLeftSidebar,
+                side: "left",
             }),
-            [
-                state,
-                open,
-                setOpen,
+            [leftOpen, setLeftOpen, leftOpenMobile, isMobile, toggleLeftSidebar]
+        );
+
+        const rightSidebarContext: SidebarContextType = React.useMemo(
+            () => ({
+                state: rightOpen ? "expanded" : "collapsed",
+                open: rightOpen,
+                setOpen: setRightOpen,
+                openMobile: rightOpenMobile,
+                setOpenMobile: setRightOpenMobile,
                 isMobile,
-                openMobile,
-                setOpenMobile,
-                toggleSidebar,
-            ],
+                toggleSidebar: toggleRightSidebar,
+                side: "right",
+            }),
+            [rightOpen, setRightOpen, rightOpenMobile, isMobile, toggleRightSidebar]
+        );
+
+        const contextValue = React.useMemo<MultiSidebarContextType>(
+            () => ({
+                leftSidebar: leftSidebarContext,
+                rightSidebar: rightSidebarContext,
+            }),
+            [leftSidebarContext, rightSidebarContext]
         );
 
         return (
-            <SidebarContext.Provider value={contextValue}>
+            <MultiSidebarContext.Provider value={contextValue}>
                 <TooltipProvider delayDuration={0}>
                     <div
                         style={
                             {
                                 "--sidebar-width": SIDEBAR_WIDTH,
                                 "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                                "--right-sidebar-width": RIGHT_SIDEBAR_WIDTH,
                                 ...style,
                             } as React.CSSProperties
                         }
                         className={cn(
-                            "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+                            "items-center flex flex-col",
                             className,
                         )}
                         ref={ref}
@@ -163,16 +189,16 @@ const SidebarProvider = React.forwardRef<
                         {children}
                     </div>
                 </TooltipProvider>
-            </SidebarContext.Provider>
+            </MultiSidebarContext.Provider>
         );
     },
 );
-SidebarProvider.displayName = "SidebarProvider";
+MultiSidebarProvider.displayName = "MultiSidebarProvider";
 
 const Sidebar = React.forwardRef<
     HTMLDivElement,
     React.ComponentProps<"div"> & {
-        side?: "left" | "right";
+        side: "left" | "right";
         variant?: "sidebar" | "floating" | "inset";
         collapsible?: "offcanvas" | "icon" | "none";
     }
@@ -186,15 +212,21 @@ const Sidebar = React.forwardRef<
             children,
             ...props
         },
-        ref,
+        ref
     ) => {
-        const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+        const {
+            [side === "left" ? "leftSidebar" : "rightSidebar"]: sidebarContext,
+        } = useMultiSidebar();
+        const { isMobile, state, openMobile, setOpenMobile } = sidebarContext;
 
         if (collapsible === "none") {
             return (
                 <aside
                     className={cn(
                         "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+                        side === "left"
+                            ? "w-[--sidebar-width]"
+                            : "w-[--right-sidebar-width]",
                         className,
                     )}
                     ref={ref}
@@ -219,10 +251,6 @@ const Sidebar = React.forwardRef<
                         }
                         side={side}
                     >
-                        <SheetHeader className="sr-only">
-                            <SheetTitle>Sidebar</SheetTitle>
-                            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-                        </SheetHeader>
                         <div className="flex h-full w-full flex-col">{children}</div>
                     </SheetContent>
                 </Sheet>
@@ -241,62 +269,71 @@ const Sidebar = React.forwardRef<
                 {/* This is what handles the sidebar gap on desktop */}
                 <div
                     className={cn(
-                        "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+                        "duration-200 relative bg-transparent transition-[width] ease-linear",
                         "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)_+_theme(spacing.4))]"
                             : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
+                        side === "left"
+                            ? "w-[--sidebar-width]"
+                            : "w-[--right-sidebar-width]"
                     )}
                 />
                 <div
                     className={cn(
-                        "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+                        "fixed h-full max-h-[calc(100%-81px)] z-10 hidden w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear 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)]",
+                            ? "left-0 w-[--sidebar-width] group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+                            : "right-0 w-[--right-sidebar-width] group-data-[collapsible=offcanvas]:right-[calc(var(--right-sidebar-width)*-1)]",
                         // Adjust the padding for floating and inset variants.
                         variant === "floating" || variant === "inset"
                             ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
-                            : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
-                        className,
+                            : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r",
+                        className
                     )}
                     {...props}
                 >
                     <div
                         data-sidebar="sidebar"
-                        className="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"
-                    >
+                        className={cn(
+                            "flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow",
+                            side === "left" && "bg-sidebar"
+                        )}>
                         {children}
                     </div>
                 </div>
             </div>
         );
-    },
+    }
 );
 Sidebar.displayName = "Sidebar";
 
 const SidebarTrigger = React.forwardRef<
     React.ElementRef<typeof Button>,
-    React.ComponentProps<typeof Button>
->(({ className, onClick, ...props }, ref) => {
-    const { toggleSidebar } = useSidebar();
+    React.ComponentProps<typeof Button> & { side?: "left" | "right" }
+>(({ className, onClick, side = "left", variant = "ghost", size = "icon", ...props }, ref) => {
+    const { [side === "left" ? "leftSidebar" : "rightSidebar"]: sidebarContext } =
+        useMultiSidebar();
+    const { toggleSidebar } = sidebarContext;
 
     return (
         <Button
             ref={ref}
             data-sidebar="trigger"
-            variant="ghost"
-            size="icon"
-            className={cn("h-7 w-7", className)}
+            variant={variant}
+            size={size}
+            className={cn("h-8 w-8", className)}
             onClick={(event) => {
                 onClick?.(event);
                 toggleSidebar();
             }}
             {...props}
         >
-            <PanelLeft />
-            <span className="sr-only">Toggle Sidebar</span>
+            {side === "left" ? <PanelLeft className="!h-5 !w-5" /> : <Info className="!h-5 !w-5" />}
+            <span className="sr-only">
+                Toggle {side === "left" ? "Left" : "Right"} Sidebar
+            </span>
         </Button>
     );
 });
@@ -304,9 +341,11 @@ SidebarTrigger.displayName = "SidebarTrigger";
 
 const SidebarRail = React.forwardRef<
     HTMLButtonElement,
-    React.ComponentProps<"button">
->(({ className, ...props }, ref) => {
-    const { toggleSidebar } = useSidebar();
+    React.ComponentProps<"button"> & { side?: "left" | "right" }
+>(({ className, side = "left", ...props }, ref) => {
+    const { [side === "left" ? "leftSidebar" : "rightSidebar"]: sidebarContext } =
+        useMultiSidebar();
+    const { toggleSidebar } = sidebarContext;
 
     return (
         <button
@@ -339,9 +378,9 @@ const SidebarInset = React.forwardRef<
         <main
             ref={ref}
             className={cn(
-                "relative flex w-full flex-1 flex-col bg-background",
-                "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
-                className,
+                "relative flex min-h-svh flex-1 flex-col bg-background",
+                "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+                className
             )}
             {...props}
         />
@@ -375,7 +414,7 @@ const SidebarHeader = React.forwardRef<
         <div
             ref={ref}
             data-sidebar="header"
-            className={cn("flex flex-col gap-2 p-2", className)}
+            className={cn("flex flex-row gap-2 p-2", className)}
             {...props}
         />
     );
@@ -558,10 +597,12 @@ const SidebarMenuButton = React.forwardRef<
         asChild?: boolean;
         isActive?: boolean;
         tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+        side?: "left" | "right";
     } & VariantProps<typeof sidebarMenuButtonVariants>
 >(
     (
         {
+            side = "left",
             asChild = false,
             isActive = false,
             variant = "default",
@@ -570,10 +611,13 @@ const SidebarMenuButton = React.forwardRef<
             className,
             ...props
         },
-        ref,
+        ref
     ) => {
         const Comp = asChild ? Slot : "button";
-        const { isMobile, state } = useSidebar();
+        const {
+            [side === "left" ? "leftSidebar" : "rightSidebar"]: sidebarContext,
+        } = useMultiSidebar();
+        const { isMobile, state } = sidebarContext;
 
         const button = (
             <Comp
@@ -779,9 +823,9 @@ export {
     SidebarMenuSub,
     SidebarMenuSubButton,
     SidebarMenuSubItem,
-    SidebarProvider,
+    MultiSidebarProvider,
     SidebarRail,
     SidebarSeparator,
     SidebarTrigger,
-    useSidebar,
-};
+    useMultiSidebar,
+};

package/src/hooks/use-mobile.tsx

@@ -1,19 +0,0 @@
-import { useEffect, useState } from "react";
-
-const MOBILE_BREAKPOINT = 768;
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
-
-  useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-
-  return !!isMobile;
-}