@mbao01/common 0.0.48 → 0.0.49

package/src/components/Form/MultiSelect/MultiSelect.tsx

@@ -2,8 +2,8 @@
 
 import type { ComponentRef, KeyboardEvent, MouseEvent, SyntheticEvent } from "react";
 import { forwardRef, useCallback, useRef, useState } from "react";
-import { CheckIcon, Cross2Icon } from "@radix-ui/react-icons";
 import { Command as CommandPrimitive } from "cmdk";
+import { CheckIcon, XIcon } from "lucide-react";
 import type {
   Item,
   MultiSelectContentProps,
@@ -235,7 +235,7 @@ export const MultiSelectTrigger = ({
               disabled={disabled}
             >
               <span className="sr-only">Remove {label} option</span>
-              <Cross2Icon className="h-4 w-4 hover:stroke-destructive" />
+              <XIcon className="h-4 w-4 hover:stroke-destructive" />
             </button>
           </Badge>
         );

package/src/components/Form/Select/Select.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import * as React from "react";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
 import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import type { SelectContentProps, SelectItemProps, SelectTriggerProps } from "./types";
 import { cn } from "../../../utilities";
 import {

package/src/components/Form/TagsInput/TagsInput.tsx

@@ -2,7 +2,7 @@
 
 import type { ChangeEvent, ClipboardEvent, KeyboardEvent, MouseEvent, SyntheticEvent } from "react";
 import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
-import { Cross2Icon } from "@radix-ui/react-icons";
+import { XIcon } from "lucide-react";
 import type { TagsInputProps } from "./types";
 import { cn } from "../../../utilities";
 import { Badge } from "../../Badge";
@@ -250,7 +250,7 @@ export const TagsInput = forwardRef<HTMLDivElement, TagsInputProps>(
               className={cn(getTagDeleteClasses())}
             >
               <span className="sr-only">Remove {tag} option</span>
-              <Cross2Icon className="h-4 w-4" />
+              <XIcon className="h-4 w-4" />
             </button>
           </Badge>
         ))}

package/src/components/Menu/ContextMenu/ContextMenu.tsx

@@ -2,7 +2,7 @@
 
 import { forwardRef } from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
+import { CheckIcon, ChevronRightIcon, DotIcon } from "lucide-react";
 import type {
   ContextMenuCheckboxItemProps,
   ContextMenuContentProps,
@@ -113,7 +113,7 @@ const ContextMenuRadioItem = forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="h-4 w-4 fill-current" />
+        <DotIcon className="h-4 w-4 fill-current" />
       </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}

package/src/components/Menu/DropdownMenu/DropdownMenu.tsx

@@ -2,7 +2,7 @@
 
 import { forwardRef } from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
+import { CheckIcon, ChevronRightIcon, DotIcon } from "lucide-react";
 import type {
   DropdownMenuCheckboxItemProps,
   DropdownMenuContentProps,
@@ -114,7 +114,7 @@ const DropdownMenuRadioItem = forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="h-4 w-4 fill-current" />
+        <DotIcon className="h-4 w-4 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}

package/src/components/Menu/Menubar/Menubar.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { forwardRef } from "react";
-import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { CheckIcon, ChevronRightIcon, DotIcon } from "lucide-react";
 import type {
   MenubarCheckboxItemProps,
   MenubarContentProps,
@@ -137,7 +137,7 @@ const MenubarRadioItem = forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
-        <DotFilledIcon className="h-4 w-4 fill-current" />
+        <DotIcon className="h-4 w-4 fill-current" />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}

package/src/components/Menu/NavigationMenu/NavigationMenu.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from "react";
-import { ChevronDownIcon } from "@radix-ui/react-icons";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { ChevronDownIcon } from "lucide-react";
 import type {
   NavigationMenuContentProps,
   NavigationMenuIndicatorProps,

package/src/components/Pagination/Pagination.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from "react";
-import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
+import { ChevronLeftIcon, ChevronRightIcon, EllipsisIcon } from "lucide-react";
 import type { PaginationProps } from "./types";
 import { cn } from "../../utilities";
 import { getButtonClasses } from "../Button/constants";
@@ -92,7 +92,7 @@ PaginationNext.displayName = "PaginationNext";
 
 const PaginationEllipsis = ({ className, ...props }: PaginationEllipsisProps) => (
   <span aria-hidden className={cn(getPaginationEllipsisClasses(), className)} {...props}>
-    <DotsHorizontalIcon className="h-4 w-4" />
+    <EllipsisIcon className="h-4 w-4" />
     <span className="sr-only">More pages</span>
   </span>
 );

package/src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,326 @@
+"use client";
+
+import type { ComponentProps, CSSProperties, ElementRef, HTMLAttributes, MouseEvent } from "react";
+import { forwardRef, useCallback, useEffect, useMemo, useState } from "react";
+import { PanelLeftIcon } from "lucide-react";
+import type { ButtonProps } from "../Button/types";
+import type { InputProps } from "../Form/Input/types";
+import type { SeparatorProps } from "../Separator/types";
+import type { SidebarContextProps, SidebarProps, SidebarProviderProps } from "./types";
+import { useIsMobile } from "../../hooks";
+import { cn } from "../../utilities";
+import { Button } from "../Button";
+import { Dialog } from "../Dialog";
+import { Input } from "../Form";
+import { Separator } from "../Separator";
+import { Tooltip } from "../Tooltip";
+import {
+  getSidebarClasses,
+  getSidebarContentClasses,
+  getSidebarFooterClasses,
+  getSidebarGapClasses,
+  getSidebarHeaderClasses,
+  getSidebarInnerClasses,
+  getSidebarInputClasses,
+  getSidebarInsetClasses,
+  getSidebarMobileClasses,
+  getSidebarOuterClasses,
+  getSidebarProviderClasses,
+  getSidebarRailClasses,
+  getSidebarSeparatorClasses,
+  getSidebarTriggerClasses,
+  SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_COOKIE_NAME,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+  SIDEBAR_WIDTH_MOBILE,
+} from "./constants";
+import { useSidebar } from "./hooks";
+import { SidebarContext } from "./SidebarContext";
+
+const Sidebar = ({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: SidebarProps) => {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+  if (collapsible === "none") {
+    return (
+      <div className={cn(getSidebarClasses({ collapsible }), className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+
+  if (isMobile) {
+    return (
+      <Dialog open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <Dialog.Content
+          side={side}
+          variant="sheet"
+          data-mobile="true"
+          data-sidebar="sidebar"
+          className={cn(getSidebarMobileClasses({ isMobile }), className)}
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as CSSProperties
+          }
+        >
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </Dialog.Content>
+      </Dialog>
+    );
+  }
+
+  return (
+    <div
+      data-side={side}
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      className={getSidebarOuterClasses()}
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div className={getSidebarGapClasses({ variant })} />
+      <div className={getSidebarInnerClasses({ side, variant })} {...props}>
+        <div
+          data-sidebar="sidebar"
+          className={cn(getSidebarMobileClasses({ isMobile }), className)}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+Sidebar.displayName = "Sidebar";
+
+const SidebarTrigger = forwardRef<ElementRef<typeof Button>, ButtonProps>(
+  ({ className, onClick, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+
+    return (
+      <Button
+        ref={ref}
+        variant="ghost"
+        data-sidebar="trigger"
+        className={cn(getSidebarTriggerClasses(), className)}
+        onClick={(event: MouseEvent<HTMLButtonElement>) => {
+          onClick?.(event);
+          toggleSidebar();
+        }}
+        {...props}
+      >
+        <PanelLeftIcon className="w-4 h-4" />
+        <span className="sr-only">Toggle Sidebar</span>
+      </Button>
+    );
+  }
+);
+SidebarTrigger.displayName = "SidebarTrigger";
+
+const SidebarRail = forwardRef<HTMLButtonElement, ComponentProps<"button">>(
+  ({ className, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+
+    return (
+      <button
+        ref={ref}
+        data-sidebar="rail"
+        aria-label="Toggle Sidebar"
+        tabIndex={-1}
+        onClick={toggleSidebar}
+        title="Toggle Sidebar"
+        className={cn(getSidebarRailClasses(), className)}
+        {...props}
+      />
+    );
+  }
+);
+SidebarRail.displayName = "SidebarRail";
+
+const SidebarInset = forwardRef<HTMLDivElement, ComponentProps<"main">>(
+  ({ className, ...props }, ref) => {
+    return <main ref={ref} className={cn(getSidebarInsetClasses(), className)} {...props} />;
+  }
+);
+SidebarInset.displayName = "SidebarInset";
+
+const SidebarInput = forwardRef<ElementRef<typeof Input>, InputProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <Input
+        ref={ref}
+        data-sidebar="input"
+        className={cn(getSidebarInputClasses(), className)}
+        {...props}
+      />
+    );
+  }
+);
+SidebarInput.displayName = "SidebarInput";
+
+const SidebarHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="header"
+        className={cn(getSidebarHeaderClasses(), className)}
+        {...props}
+      />
+    );
+  }
+);
+SidebarHeader.displayName = "SidebarHeader";
+
+const SidebarFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="footer"
+        className={cn(getSidebarFooterClasses(), className)}
+        {...props}
+      />
+    );
+  }
+);
+SidebarFooter.displayName = "SidebarFooter";
+
+const SidebarSeparator = ({ className, ...props }: SeparatorProps) => {
+  return (
+    <Separator
+      data-sidebar="separator"
+      className={cn(getSidebarSeparatorClasses(), className)}
+      {...props}
+    />
+  );
+};
+SidebarSeparator.displayName = "SidebarSeparator";
+
+const SidebarContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="content"
+        className={cn(getSidebarContentClasses(), className)}
+        {...props}
+      />
+    );
+  }
+);
+SidebarContent.displayName = "SidebarContent";
+
+const SidebarProvider = forwardRef<HTMLDivElement, SidebarProviderProps>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      tooltipProvider,
+      ...props
+    },
+    ref
+  ) => {
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = useState(false);
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = useState(defaultOpen);
+    const open = openProp ?? _open;
+    const setOpen = useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        if (setOpenProp) {
+          return setOpenProp?.(typeof value === "function" ? value(open) : value);
+        }
+
+        _setOpen(value);
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      },
+      [setOpenProp, open]
+    );
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = useCallback(() => {
+      return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+    }, [isMobile, setOpen, setOpenMobile]);
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+          event.preventDefault();
+          toggleSidebar();
+        }
+      };
+
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [toggleSidebar]);
+
+    // 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";
+
+    const contextValue = useMemo<SidebarContextProps>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    );
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <Tooltip.Provider delayDuration={0} {...tooltipProvider}>
+          <div
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as CSSProperties
+            }
+            className={cn(getSidebarProviderClasses(), className)}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </Tooltip.Provider>
+      </SidebarContext.Provider>
+    );
+  }
+);
+SidebarProvider.displayName = "SidebarProvider";
+
+Sidebar.Content = SidebarContent;
+Sidebar.Footer = SidebarFooter;
+Sidebar.Header = SidebarHeader;
+Sidebar.Input = SidebarInput;
+Sidebar.Inset = SidebarInset;
+Sidebar.Provider = SidebarProvider;
+Sidebar.Rail = SidebarRail;
+Sidebar.Separator = SidebarSeparator;
+Sidebar.Trigger = SidebarTrigger;
+
+export { Sidebar };

package/src/components/Sidebar/SidebarContext.tsx

@@ -0,0 +1,6 @@
+"use client";
+
+import { createContext } from "react";
+import { type SidebarContextProps } from "./types";
+
+export const SidebarContext = createContext<SidebarContextProps | null>(null);

package/src/components/Sidebar/SidebarGroup.tsx

@@ -0,0 +1,72 @@
+import { forwardRef } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import type {
+  SidebarGroupActionProps,
+  SidebarGroupContentProps,
+  SidebarGroupLabelProps,
+  SidebarGroupProps,
+} from "./types";
+import { cn } from "../../utilities";
+import {
+  getSidebarGroupActionClasses,
+  getSidebarGroupClasses,
+  getSidebarGroupContentClasses,
+  getSidebarGroupLabelClasses,
+} from "./constants";
+
+const SidebarGroup = ({ className, ...props }: SidebarGroupProps) => {
+  return (
+    <div data-sidebar="group" className={cn(getSidebarGroupClasses(), className)} {...props} />
+  );
+};
+SidebarGroup.displayName = "SidebarGroup";
+
+const SidebarGroupLabel = forwardRef<HTMLDivElement, SidebarGroupLabelProps>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+
+    return (
+      <Comp
+        ref={ref}
+        data-sidebar="group-label"
+        className={cn(getSidebarGroupLabelClasses(), className)}
+        {...props}
+      />
+    );
+  }
+);
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+
+const SidebarGroupAction = forwardRef<HTMLButtonElement, SidebarGroupActionProps>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+
+    return (
+      <Comp
+        ref={ref}
+        data-sidebar="group-action"
+        className={cn(getSidebarGroupActionClasses(), className)}
+        {...props}
+      />
+    );
+  }
+);
+SidebarGroupAction.displayName = "SidebarGroupAction";
+
+const SidebarGroupContent = forwardRef<HTMLDivElement, SidebarGroupContentProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-sidebar="group-content"
+      className={cn(getSidebarGroupContentClasses(), className)}
+      {...props}
+    />
+  )
+);
+SidebarGroupContent.displayName = "SidebarGroupContent";
+
+SidebarGroup.Action = SidebarGroupAction;
+SidebarGroup.Content = SidebarGroupContent;
+SidebarGroup.Label = SidebarGroupLabel;
+
+export { SidebarGroup };