@mbao01/common 0.0.41 → 0.0.43

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

@@ -2,11 +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, DotFilledIcon } from "@radix-ui/react-icons";
 import type {
   ContextMenuCheckboxItemProps,
   ContextMenuContentProps,
@@ -32,9 +28,7 @@ import {
   getMenubarSubTriggerClasses,
 } from "../Menubar/constants";
 
-const ContextMenu = (props: ContextMenuProps) => (
-  <ContextMenuPrimitive.Root {...props} />
-);
+const ContextMenu = (props: ContextMenuProps) => <ContextMenuPrimitive.Root {...props} />;
 
 const ContextMenuSubTrigger = forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
@@ -106,8 +100,7 @@ const ContextMenuCheckboxItem = forwardRef<
     {children}
   </ContextMenuPrimitive.CheckboxItem>
 ));
-ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName;
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
 
 const ContextMenuRadioItem = forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
@@ -152,13 +145,8 @@ const ContextMenuSeparator = forwardRef<
 ));
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 
-const ContextMenuShortcut = ({
-  className,
-  ...props
-}: ContextMenuShortcutProps) => {
-  return (
-    <span className={cn(getMenubarShortcutClasses(), className)} {...props} />
-  );
+const ContextMenuShortcut = ({ className, ...props }: ContextMenuShortcutProps) => {
+  return <span className={cn(getMenubarShortcutClasses(), className)} {...props} />;
 };
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
 

package/src/components/Menu/ContextMenu/types.ts

@@ -12,9 +12,7 @@ import {
   getMenubarSubTriggerClasses,
 } from "../Menubar/constants";
 
-export type ContextMenuProps = React.ComponentPropsWithoutRef<
-  typeof ContextMenuPrimitive.Root
->;
+export type ContextMenuProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root>;
 
 export type ContextMenuSubTriggerProps = React.ComponentPropsWithoutRef<
   typeof ContextMenuPrimitive.SubTrigger

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

@@ -2,11 +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, DotFilledIcon } from "@radix-ui/react-icons";
 import type {
   DropdownMenuCheckboxItemProps,
   DropdownMenuContentProps,
@@ -32,9 +28,7 @@ import {
   getMenubarSubTriggerClasses,
 } from "../Menubar/constants";
 
-const DropdownMenu = (props: DropdownMenuProps) => (
-  <DropdownMenuPrimitive.Root {...props} />
-);
+const DropdownMenu = (props: DropdownMenuProps) => <DropdownMenuPrimitive.Root {...props} />;
 
 const DropdownMenuSubTrigger = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
@@ -49,8 +43,7 @@ const DropdownMenuSubTrigger = forwardRef<
     <ChevronRightIcon className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ));
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -62,8 +55,7 @@ const DropdownMenuSubContent = forwardRef<
     {...props}
   />
 ));
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -109,8 +101,7 @@ const DropdownMenuCheckboxItem = forwardRef<
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
 ));
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName;
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -155,13 +146,8 @@ const DropdownMenuSeparator = forwardRef<
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: DropdownMenuShortcutProps) => {
-  return (
-    <span className={cn(getMenubarShortcutClasses(), className)} {...props} />
-  );
+const DropdownMenuShortcut = ({ className, ...props }: DropdownMenuShortcutProps) => {
+  return <span className={cn(getMenubarShortcutClasses(), className)} {...props} />;
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 

package/src/components/Menu/DropdownMenu/types.ts

@@ -12,9 +12,7 @@ import {
   getMenubarSubTriggerClasses,
 } from "../Menubar/constants";
 
-export type DropdownMenuProps = React.ComponentPropsWithoutRef<
-  typeof DropdownMenuPrimitive.Root
->;
+export type DropdownMenuProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>;
 
 export type DropdownMenuSubTriggerProps = React.ComponentPropsWithoutRef<
   typeof DropdownMenuPrimitive.SubTrigger

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

@@ -1,11 +1,7 @@
 "use client";
 
 import { forwardRef } from "react";
-import {
-  CheckIcon,
-  ChevronRightIcon,
-  DotFilledIcon,
-} from "@radix-ui/react-icons";
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import type {
   MenubarCheckboxItemProps,
@@ -36,10 +32,7 @@ import {
 } from "./constants";
 
 const Menubar = ({ className, ...props }: MenubarProps) => (
-  <MenubarPrimitive.Root
-    className={cn(getMenubarClasses(), className)}
-    {...props}
-  />
+  <MenubarPrimitive.Root className={cn(getMenubarClasses(), className)} {...props} />
 );
 Menubar.displayName = MenubarPrimitive.Root.displayName;
 
@@ -85,35 +78,29 @@ MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
 const MenubarContent = forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Content>,
   MenubarContentProps
->(
-  (
-    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
-    ref
-  ) => (
-    <MenubarPrimitive.Portal>
-      <MenubarPrimitive.Content
-        ref={ref}
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(getMenubarContentClasses(), className)}
-        {...props}
-      />
-    </MenubarPrimitive.Portal>
-  )
-);
+>(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => (
+  <MenubarPrimitive.Portal>
+    <MenubarPrimitive.Content
+      ref={ref}
+      align={align}
+      alignOffset={alignOffset}
+      sideOffset={sideOffset}
+      className={cn(getMenubarContentClasses(), className)}
+      {...props}
+    />
+  </MenubarPrimitive.Portal>
+));
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
 
-const MenubarItem = forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Item>,
-  MenubarItemProps
->(({ className, inset, variant, ...props }, ref) => (
-  <MenubarPrimitive.Item
-    ref={ref}
-    className={cn(getMenubarItemClasses({ inset, variant }), className)}
-    {...props}
-  />
-));
+const MenubarItem = forwardRef<React.ElementRef<typeof MenubarPrimitive.Item>, MenubarItemProps>(
+  ({ className, inset, variant, ...props }, ref) => (
+    <MenubarPrimitive.Item
+      ref={ref}
+      className={cn(getMenubarItemClasses({ inset, variant }), className)}
+      {...props}
+    />
+  )
+);
 MenubarItem.displayName = MenubarPrimitive.Item.displayName;
 
 const MenubarCheckboxItem = forwardRef<
@@ -154,16 +141,15 @@ const MenubarRadioItem = forwardRef<
 ));
 MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
 
-const MenubarLabel = forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Label>,
-  MenubarLabelProps
->(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Label
-    ref={ref}
-    className={cn(getMenubarLabelClasses({ inset }), className)}
-    {...props}
-  />
-));
+const MenubarLabel = forwardRef<React.ElementRef<typeof MenubarPrimitive.Label>, MenubarLabelProps>(
+  ({ className, inset, ...props }, ref) => (
+    <MenubarPrimitive.Label
+      ref={ref}
+      className={cn(getMenubarLabelClasses({ inset }), className)}
+      {...props}
+    />
+  )
+);
 MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
 
 const MenubarSeparator = forwardRef<
@@ -179,9 +165,7 @@ const MenubarSeparator = forwardRef<
 MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
 
 const MenubarShortcut = ({ className, ...props }: MenubarShortcutProps) => {
-  return (
-    <span className={cn(getMenubarShortcutClasses(), className)} {...props} />
-  );
+  return <span className={cn(getMenubarShortcutClasses(), className)} {...props} />;
 };
 MenubarShortcut.displayname = "MenubarShortcut";
 

package/src/components/Menu/Menubar/types.ts

@@ -13,13 +13,9 @@ import {
   getMenubarTriggerClasses,
 } from "./constants";
 
-export type MenubarProps = React.ComponentPropsWithoutRef<
-  typeof MenubarPrimitive.Root
->;
+export type MenubarProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>;
 
-export type MenubarTriggerProps = React.ComponentPropsWithoutRef<
-  typeof MenubarPrimitive.Trigger
-> &
+export type MenubarTriggerProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger> &
   VariantProps<typeof getMenubarTriggerClasses>;
 
 export type MenubarSubTriggerProps = React.ComponentPropsWithoutRef<
@@ -27,9 +23,7 @@ export type MenubarSubTriggerProps = React.ComponentPropsWithoutRef<
 > &
   VariantProps<typeof getMenubarSubTriggerClasses>;
 
-export type MenubarContentProps = React.ComponentPropsWithoutRef<
-  typeof MenubarPrimitive.Content
-> &
+export type MenubarContentProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content> &
   VariantProps<typeof getMenubarContentClasses>;
 
 export type MenubarSubContentProps = React.ComponentPropsWithoutRef<
@@ -37,9 +31,7 @@ export type MenubarSubContentProps = React.ComponentPropsWithoutRef<
 > &
   VariantProps<typeof getMenubarSubContentClasses>;
 
-export type MenubarItemProps = React.ComponentPropsWithoutRef<
-  typeof MenubarPrimitive.Item
-> &
+export type MenubarItemProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> &
   VariantProps<typeof getMenubarItemClasses>;
 
 export type MenubarCheckboxItemProps = React.ComponentPropsWithoutRef<
@@ -52,9 +44,7 @@ export type MenubarRadioItemProps = React.ComponentPropsWithoutRef<
 > &
   VariantProps<typeof getMenubarRadioItemClasses>;
 
-export type MenubarLabelProps = React.ComponentPropsWithoutRef<
-  typeof MenubarPrimitive.Label
-> &
+export type MenubarLabelProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> &
   VariantProps<typeof getMenubarLabelClasses>;
 
 export type MenubarSeparatorProps = React.ComponentPropsWithoutRef<

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

@@ -19,15 +19,8 @@ import {
   getNavigationMenuViewportClasses,
 } from "./constants";
 
-const NavigationMenu = ({
-  className,
-  children,
-  ...props
-}: NavigationMenuProps) => (
-  <NavigationMenuPrimitive.Root
-    className={cn(getNavigationMenuClasses(), className)}
-    {...props}
-  >
+const NavigationMenu = ({ className, children, ...props }: NavigationMenuProps) => (
+  <NavigationMenuPrimitive.Root className={cn(getNavigationMenuClasses(), className)} {...props}>
     {children}
     <NavigationMenuViewport />
   </NavigationMenuPrimitive.Root>
@@ -88,8 +81,7 @@ const NavigationMenuViewport = forwardRef<
     />
   </div>
 ));
-NavigationMenuViewport.displayName =
-  NavigationMenuPrimitive.Viewport.displayName;
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
 
 const NavigationMenuIndicator = forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
@@ -103,8 +95,7 @@ const NavigationMenuIndicator = forwardRef<
     <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuPrimitive.Indicator>
 ));
-NavigationMenuIndicator.displayName =
-  NavigationMenuPrimitive.Indicator.displayName;
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
 
 NavigationMenu.List = NavigationMenuList;
 NavigationMenu.Item = NavigationMenuPrimitive.Item;

package/src/components/Pagination/Pagination.tsx

@@ -1,9 +1,15 @@
 import { forwardRef } from "react";
+import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
+import type { PaginationProps } from "./types";
+import { cn } from "../../utilities";
+import { getButtonClasses } from "../Button/constants";
 import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  DotsHorizontalIcon,
-} from "@radix-ui/react-icons";
+  getPaginationClasses,
+  getPaginationContentClasses,
+  getPaginationEllipsisClasses,
+  getPaginationNextClasses,
+  getPaginationPreviousClasses,
+} from "./constants";
 import {
   PaginationContentProps,
   PaginationEllipsisProps,
@@ -11,18 +17,7 @@ import {
   PaginationLinkProps,
   PaginationNextProps,
   PaginationPreviousProps,
-  type PaginationProps,
 } from "./types";
-import { cn } from "../../utilities";
-import {
-  getPaginationClasses,
-  getPaginationContentClasses,
-  getPaginationEllipsisClasses,
-  getPaginationNextClasses,
-  getPaginationPreviousClasses,
-} from "./constants";
-
-import { getButtonClasses } from "../Button/constants";
 
 const Pagination = ({ className, ...props }: PaginationProps) => (
   <nav
@@ -36,18 +31,14 @@ Pagination.displayName = "Pagination";
 
 const PaginationContent = forwardRef<HTMLUListElement, PaginationContentProps>(
   ({ className, ...props }, ref) => (
-    <ul
-      ref={ref}
-      className={cn(getPaginationContentClasses(), className)}
-      {...props}
-    />
+    <ul ref={ref} className={cn(getPaginationContentClasses(), className)} {...props} />
   )
 );
 PaginationContent.displayName = "PaginationContent";
 
-const PaginationItem = forwardRef<HTMLLIElement, PaginationItemProps>(
-  (props, ref) => <li ref={ref} {...props} />
-);
+const PaginationItem = forwardRef<HTMLLIElement, PaginationItemProps>((props, ref) => (
+  <li ref={ref} {...props} />
+));
 PaginationItem.displayName = "PaginationItem";
 
 const PaginationLink = ({
@@ -75,11 +66,7 @@ const PaginationLink = ({
 );
 PaginationLink.displayName = "PaginationLink";
 
-const PaginationPrevious = ({
-  className,
-  children,
-  ...props
-}: PaginationPreviousProps) => (
+const PaginationPrevious = ({ className, children, ...props }: PaginationPreviousProps) => (
   <PaginationLink
     aria-label="Go to previous page"
     className={cn(getPaginationPreviousClasses(), className)}
@@ -91,11 +78,7 @@ const PaginationPrevious = ({
 );
 PaginationPrevious.displayName = "PaginationPrevious";
 
-const PaginationNext = ({
-  className,
-  children,
-  ...props
-}: PaginationNextProps) => (
+const PaginationNext = ({ className, children, ...props }: PaginationNextProps) => (
   <PaginationLink
     aria-label="Go to next page"
     className={cn(getPaginationNextClasses(), className)}
@@ -107,15 +90,8 @@ const PaginationNext = ({
 );
 PaginationNext.displayName = "PaginationNext";
 
-const PaginationEllipsis = ({
-  className,
-  ...props
-}: PaginationEllipsisProps) => (
-  <span
-    aria-hidden
-    className={cn(getPaginationEllipsisClasses(), className)}
-    {...props}
-  >
+const PaginationEllipsis = ({ className, ...props }: PaginationEllipsisProps) => (
+  <span aria-hidden className={cn(getPaginationEllipsisClasses(), className)} {...props}>
     <DotsHorizontalIcon className="h-4 w-4" />
     <span className="sr-only">More pages</span>
   </span>

package/src/components/Pagination/constants.ts

@@ -2,13 +2,9 @@ import { cva } from "../../libs";
 
 export const getPaginationClasses = cva("flex justify-center");
 
-export const getPaginationContentClasses = cva(
-  "flex flex-row items-center gap-1"
-);
+export const getPaginationContentClasses = cva("flex flex-row items-center gap-1");
 
-export const getPaginationEllipsisClasses = cva(
-  "flex h-9 w-9 items-center justify-center"
-);
+export const getPaginationEllipsisClasses = cva("flex h-9 w-9 items-center justify-center");
 
 export const getPaginationNextClasses = cva("gap-1 px-3");
 

package/src/components/Popover/Popover.tsx

@@ -2,8 +2,8 @@
 
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { getPopoverContentClasses } from "./constants";
 import { cn } from "../../utilities";
+import { getPopoverContentClasses } from "./constants";
 import { PopoverContentProps, PopoverProps } from "./types";
 
 const Popover = (props: PopoverProps) => <PopoverPrimitive.Root {...props} />;

package/src/components/Popover/types.ts

@@ -2,11 +2,7 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { type VariantProps } from "../../libs";
 import { getPopoverContentClasses } from "./constants";
 
-export type PopoverProps = React.ComponentPropsWithoutRef<
-  typeof PopoverPrimitive.Root
->;
+export type PopoverProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>;
 
-export type PopoverContentProps = React.ComponentPropsWithoutRef<
-  typeof PopoverPrimitive.Content
-> &
+export type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> &
   VariantProps<typeof getPopoverContentClasses>;

package/src/components/Progress/Progress.tsx

@@ -2,9 +2,9 @@
 
 import React from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import { type ProgressProps } from "./types";
 import { cn } from "../../utilities";
 import { getProgressClasses, getProgressIndicatorClasses } from "./constants";
+import { type ProgressProps } from "./types";
 
 export const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
@@ -20,9 +20,7 @@ export const Progress = React.forwardRef<
     <ProgressPrimitive.Indicator
       className={cn(getProgressIndicatorClasses({ variant }))}
       style={{
-        transform: `translateX(-${
-          (100 * (max - Math.max(Math.min(value ?? 0, max), 0))) / max
-        }%)`,
+        transform: `translateX(-${(100 * (max - Math.max(Math.min(value ?? 0, max), 0))) / max}%)`,
       }}
     />
   </ProgressPrimitive.Root>

package/src/components/Progress/constants.ts

@@ -1,49 +1,43 @@
 import { cva } from "../../libs";
 
-export const getProgressClasses = cva(
-  "relative h-2 w-full overflow-hidden rounded-full",
-  {
-    variants: {
-      variant: {
-        accent: "bg-accent/20",
-        base: "bg-base-content/20",
-        error: "bg-error/20",
-        ghost: "bg-ghost/20",
-        info: "bg-info/20",
-        link: "bg-link/20",
-        neutral: "bg-neutral/20",
-        primary: "bg-primary/20",
-        secondary: "bg-secondary/20",
-        success: "bg-success/20",
-        warning: "bg-warning/20",
-      },
+export const getProgressClasses = cva("relative h-2 w-full overflow-hidden rounded-full", {
+  variants: {
+    variant: {
+      accent: "bg-accent/20",
+      base: "bg-base-content/20",
+      error: "bg-error/20",
+      ghost: "bg-ghost/20",
+      info: "bg-info/20",
+      link: "bg-link/20",
+      neutral: "bg-neutral/20",
+      primary: "bg-primary/20",
+      secondary: "bg-secondary/20",
+      success: "bg-success/20",
+      warning: "bg-warning/20",
     },
-    defaultVariants: {
-      variant: "base",
-    },
-  }
-);
+  },
+  defaultVariants: {
+    variant: "base",
+  },
+});
 
-export const getProgressIndicatorClasses = cva(
-  "h-full w-full flex-1 transition-all",
-  {
-    variants: {
-      variant: {
-        accent: "bg-accent",
-        base: "bg-base-content",
-        error: "bg-error",
-        ghost: "bg-ghost",
-        info: "bg-info",
-        link: "bg-link",
-        neutral: "bg-neutral",
-        primary: "bg-primary",
-        secondary: "bg-secondary",
-        success: "bg-success",
-        warning: "bg-warning",
-      },
-    },
-    defaultVariants: {
-      variant: "base",
+export const getProgressIndicatorClasses = cva("h-full w-full flex-1 transition-all", {
+  variants: {
+    variant: {
+      accent: "bg-accent",
+      base: "bg-base-content",
+      error: "bg-error",
+      ghost: "bg-ghost",
+      info: "bg-info",
+      link: "bg-link",
+      neutral: "bg-neutral",
+      primary: "bg-primary",
+      secondary: "bg-secondary",
+      success: "bg-success",
+      warning: "bg-warning",
     },
-  }
-);
+  },
+  defaultVariants: {
+    variant: "base",
+  },
+});

package/src/components/ScrollArea/ScrollArea.tsx

@@ -11,19 +11,9 @@ import {
   getScrollAreaViewportClasses,
 } from "./constants";
 
-const ScrollArea = ({
-  className,
-  children,
-  scrollbar,
-  ...props
-}: ScrollAreaProps) => (
-  <ScrollAreaPrimitive.Root
-    className={cn(getScrollAreaClasses(), className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport
-      className={cn(getScrollAreaViewportClasses())}
-    >
+const ScrollArea = ({ className, children, scrollbar, ...props }: ScrollAreaProps) => (
+  <ScrollAreaPrimitive.Root className={cn(getScrollAreaClasses(), className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className={cn(getScrollAreaViewportClasses())}>
       {children}
     </ScrollAreaPrimitive.Viewport>
     <Scrollbar {...scrollbar} />
@@ -42,9 +32,7 @@ const Scrollbar = forwardRef<
     className={cn(getScrollAreaScrollbarClasses({ orientation }), className)}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb
-      className={cn(getScrollAreaThumbClasses({ variant }))}
-    />
+    <ScrollAreaPrimitive.ScrollAreaThumb className={cn(getScrollAreaThumbClasses({ variant }))} />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
 Scrollbar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;