@mbao01/common 0.0.19 → 0.0.20

package/dist/types/components/Drawer/Drawer.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { DrawerProps } from "./types";
+declare const Drawer: {
+    ({ shouldScaleBackground, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    Portal: import("react").FC<import("@radix-ui/react-dialog").DialogPortalProps>;
+    Overlay: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Close: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+        onAnimationEnd?: ((open: boolean) => void) | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Header: {
+        ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Title: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+};
+declare const DrawerTrigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const DrawerPortal: import("react").FC<import("@radix-ui/react-dialog").DialogPortalProps>;
+declare const DrawerClose: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const DrawerOverlay: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const DrawerContent: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    onAnimationEnd?: ((open: boolean) => void) | undefined;
+} & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const DrawerHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DrawerFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DrawerTitle: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+declare const DrawerDescription: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };

package/dist/types/components/Drawer/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const getDrawerContentClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const getDrawerDescriptionClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const getDrawerHeaderClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const getDrawerFooterClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const getDrawerOverlayClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const getDrawerTitleClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/types/components/Drawer/index.d.ts

@@ -0,0 +1 @@
+export { Drawer } from "./Drawer";

package/dist/types/components/Drawer/types.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { Drawer as DrawerPrimitive } from "vaul";
+export type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>;

package/dist/types/components/Pagination/Pagination.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { PaginationEllipsisProps, PaginationLinkProps, PaginationNextProps, PaginationPreviousProps, type PaginationProps } from "./types";
+declare const Pagination: {
+    ({ className, ...props }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    Content: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+    Link: {
+        ({ className, size, wide, outline, variant, isActive, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+    Previous: {
+        ({ className, children, ...props }: PaginationPreviousProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Next: {
+        ({ className, children, ...props }: PaginationNextProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Ellipsis: {
+        ({ className, ...props }: PaginationEllipsisProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export { Pagination };

package/dist/types/components/Pagination/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const getPaginationClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const getPaginationContentClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const getPaginationEllipsisClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const getPaginationNextClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const getPaginationPreviousClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/types/components/Pagination/index.d.ts

@@ -0,0 +1 @@
+export { Pagination } from "./Pagination";

package/dist/types/components/Pagination/types.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { VariantProps } from "../../libs";
+import { getButtonClasses } from "../Button/constants";
+export type PaginationProps = React.ComponentProps<"nav">;
+export type PaginationContentProps = React.ComponentProps<"ul">;
+export type PaginationEllipsisProps = React.ComponentProps<"span">;
+export type PaginationItemProps = React.ComponentProps<"li">;
+export type PaginationLinkProps = React.ComponentProps<"a"> & VariantProps<typeof getButtonClasses> & {
+    isActive?: boolean;
+};
+export type PaginationPreviousProps = PaginationLinkProps;
+export type PaginationNextProps = PaginationLinkProps;

package/dist/types/components/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import type { ScrollAreaProps } from "./types";
+declare const ScrollArea: {
+    ({ className, children, scrollbar, ...props }: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+};
+declare const Scrollbar: import("react").ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    variant?: "accent" | "error" | "ghost" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "base" | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export { ScrollArea, Scrollbar };

package/dist/types/components/ScrollArea/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const getScrollAreaClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const getScrollAreaScrollbarClasses: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const getScrollAreaThumbClasses: (props?: ({
+    variant?: "accent" | "error" | "ghost" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "base" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const getScrollAreaViewportClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/types/components/ScrollArea/index.d.ts

@@ -0,0 +1 @@
+export { ScrollArea } from "./ScrollArea";

package/dist/types/components/ScrollArea/types.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { VariantProps } from "../../libs";
+import { getScrollAreaThumbClasses } from "./constants";
+export type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
+    scrollbar?: ScrollbarProps;
+};
+export type ScrollbarProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> & VariantProps<typeof getScrollAreaThumbClasses>;

package/dist/types/index.d.ts

@@ -1,6 +1,7 @@
 /** actions */
 export * from "./components/Button";
 export * from "./components/Breadcrumbs";
+export * from "./components/Pagination";
 export * from "./components/Toggle";
 export * from "./components/ToggleGroup";
 /** data display */
@@ -13,6 +14,7 @@ export * from "./components/Calendar";
 export * from "./components/Collapsible";
 export * from "./components/Description";
 export * from "./components/Progress";
+export * from "./components/ScrollArea";
 export * from "./components/Separator";
 export * from "./components/Sonner";
 export * from "./components/Tabs";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.19",
+  "version": "0.0.20",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -71,6 +71,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slider": "^1.1.2",
@@ -89,7 +90,8 @@
     "react-international-phone": "^4.2.6",
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.2.1",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.9.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^8.0.6",
@@ -136,5 +138,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "3bc7cfc3008d4e1a0f47a850aec1055455ec399a"
+  "gitHead": "957331eff1e44996fb087ad2feef3052d2e1a3f7"
 }

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { Drawer as DrawerPrimitive } from "vaul";
+import { cn } from "../../utilities";
+import { forwardRef } from "react";
+import { DrawerProps } from "./types";
+import {
+  getDrawerContentClasses,
+  getDrawerDescriptionClasses,
+  getDrawerFooterClasses,
+  getDrawerHeaderClasses,
+  getDrawerOverlayClasses,
+  getDrawerTitleClasses,
+} from "./constants";
+
+const Drawer = ({ shouldScaleBackground = true, ...props }: DrawerProps) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+);
+Drawer.displayName = "Drawer";
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn(getDrawerOverlayClasses(), className)}
+    {...props}
+  />
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(getDrawerContentClasses(), className)}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[80px] rounded-full bg-base-300" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+));
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn(getDrawerHeaderClasses(), className)} {...props} />
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn(getDrawerFooterClasses(), className)} {...props} />
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerTitle = forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(getDrawerTitleClasses(), className)}
+    {...props}
+  />
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn(getDrawerDescriptionClasses(), className)}
+    {...props}
+  />
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+Drawer.Portal = DrawerPortal;
+Drawer.Overlay = DrawerOverlay;
+Drawer.Trigger = DrawerTrigger;
+Drawer.Close = DrawerClose;
+Drawer.Content = DrawerContent;
+Drawer.Header = DrawerHeader;
+Drawer.Footer = DrawerFooter;
+Drawer.Title = DrawerTitle;
+Drawer.Description = DrawerDescription;
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};

package/src/components/Drawer/constants.ts

@@ -0,0 +1,19 @@
+import { cva } from "../../libs";
+
+export const getDrawerContentClasses = cva(
+  "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-base-100"
+);
+
+export const getDrawerDescriptionClasses = cva("text-sm");
+
+export const getDrawerHeaderClasses = cva(
+  "grid gap-1.5 p-4 text-center sm:text-left"
+);
+
+export const getDrawerFooterClasses = cva("mt-auto flex flex-col gap-2 p-4");
+
+export const getDrawerOverlayClasses = cva("fixed inset-0 z-50 bg-black/80");
+
+export const getDrawerTitleClasses = cva(
+  "text-lg font-semibold leading-none tracking-tight"
+);

package/src/components/Drawer/index.ts

@@ -0,0 +1 @@
+export { Drawer } from "./Drawer";

package/src/components/Drawer/types.ts

@@ -0,0 +1,3 @@
+import { Drawer as DrawerPrimitive } from "vaul";
+
+export type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>;

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,132 @@
+import { forwardRef } from "react";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DotsHorizontalIcon,
+} from "@radix-ui/react-icons";
+import {
+  PaginationContentProps,
+  PaginationEllipsisProps,
+  PaginationItemProps,
+  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
+    role="navigation"
+    aria-label="pagination"
+    className={cn(getPaginationClasses(), className)}
+    {...props}
+  />
+);
+Pagination.displayName = "Pagination";
+
+const PaginationContent = forwardRef<HTMLUListElement, PaginationContentProps>(
+  ({ className, ...props }, ref) => (
+    <ul
+      ref={ref}
+      className={cn(getPaginationContentClasses(), className)}
+      {...props}
+    />
+  )
+);
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = forwardRef<HTMLLIElement, PaginationItemProps>(
+  (props, ref) => <li ref={ref} {...props} />
+);
+PaginationItem.displayName = "PaginationItem";
+
+const PaginationLink = ({
+  className,
+  size,
+  wide,
+  outline,
+  variant = "ghost",
+  isActive,
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      getButtonClasses({
+        size,
+        wide,
+        outline: outline ?? isActive,
+        variant,
+      }),
+      className
+    )}
+    {...props}
+  />
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = ({
+  className,
+  children,
+  ...props
+}: PaginationPreviousProps) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    className={cn(getPaginationPreviousClasses(), className)}
+    {...props}
+  >
+    <ChevronLeftIcon className="h-4 w-4" />
+    {children && <span>{children}</span>}
+  </PaginationLink>
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({
+  className,
+  children,
+  ...props
+}: PaginationNextProps) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    className={cn(getPaginationNextClasses(), className)}
+    {...props}
+  >
+    {children && <span>{children}</span>}
+    <ChevronRightIcon className="h-4 w-4" />
+  </PaginationLink>
+);
+PaginationNext.displayName = "PaginationNext";
+
+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>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+Pagination.Content = PaginationContent;
+Pagination.Link = PaginationLink;
+Pagination.Item = PaginationItem;
+Pagination.Previous = PaginationPrevious;
+Pagination.Next = PaginationNext;
+Pagination.Ellipsis = PaginationEllipsis;
+
+export { Pagination };

package/src/components/Pagination/constants.ts

@@ -0,0 +1,15 @@
+import { cva } from "../../libs";
+
+export const getPaginationClasses = cva("mx-auto flex w-full justify-center");
+
+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 getPaginationNextClasses = cva("gap-1 px-3");
+
+export const getPaginationPreviousClasses = cva("gap-1 px-3");

package/src/components/Pagination/index.ts

@@ -0,0 +1 @@
+export { Pagination } from "./Pagination";

package/src/components/Pagination/types.ts

@@ -0,0 +1,19 @@
+import { VariantProps } from "../../libs";
+import { getButtonClasses } from "../Button/constants";
+
+export type PaginationProps = React.ComponentProps<"nav">;
+
+export type PaginationContentProps = React.ComponentProps<"ul">;
+
+export type PaginationEllipsisProps = React.ComponentProps<"span">;
+
+export type PaginationItemProps = React.ComponentProps<"li">;
+
+export type PaginationLinkProps = React.ComponentProps<"a"> &
+  VariantProps<typeof getButtonClasses> & {
+    isActive?: boolean;
+  };
+
+export type PaginationPreviousProps = PaginationLinkProps;
+
+export type PaginationNextProps = PaginationLinkProps;

package/src/components/ScrollArea/ScrollArea.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { forwardRef } from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import type { ScrollAreaProps, ScrollbarProps } from "./types";
+import { cn } from "../../utilities";
+import {
+  getScrollAreaClasses,
+  getScrollAreaScrollbarClasses,
+  getScrollAreaThumbClasses,
+  getScrollAreaViewportClasses,
+} from "./constants";
+
+const ScrollArea = ({
+  className,
+  children,
+  scrollbar,
+  ...props
+}: ScrollAreaProps) => (
+  <ScrollAreaPrimitive.Root
+    className={cn(getScrollAreaClasses(), className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport
+      className={cn(getScrollAreaViewportClasses())}
+    >
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <Scrollbar {...scrollbar} />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+);
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const Scrollbar = forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  ScrollbarProps
+>(({ className, variant, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(getScrollAreaScrollbarClasses({ orientation }), className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb
+      className={cn(getScrollAreaThumbClasses({ variant }))}
+    />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+Scrollbar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, Scrollbar };

package/src/components/ScrollArea/constants.ts

@@ -0,0 +1,36 @@
+import { cva } from "../../libs";
+
+export const getScrollAreaClasses = cva("relative overflow-hidden");
+
+export const getScrollAreaScrollbarClasses = cva(
+  "flex touch-none select-none transition-colors",
+  {
+    variants: {
+      orientation: {
+        horizontal: "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+        vertical: "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      },
+    },
+  }
+);
+
+export const getScrollAreaThumbClasses = cva("relative flex-1 rounded-full", {
+  variants: {
+    variant: {
+      accent: "bg-accent",
+      base: "bg-base-300",
+      error: "bg-error",
+      ghost: "bg-ghost",
+      info: "bg-info",
+      neutral: "bg-neutral",
+      primary: "bg-primary",
+      secondary: "bg-secondary",
+      success: "bg-success",
+      warning: "bg-warning",
+    },
+  },
+});
+
+export const getScrollAreaViewportClasses = cva(
+  "h-full w-full rounded-[inherit]"
+);

package/src/components/ScrollArea/index.ts

@@ -0,0 +1 @@
+export { ScrollArea } from "./ScrollArea";

package/src/components/ScrollArea/types.ts

@@ -0,0 +1,14 @@
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { VariantProps } from "../../libs";
+import { getScrollAreaThumbClasses } from "./constants";
+
+export type ScrollAreaProps = React.ComponentPropsWithoutRef<
+  typeof ScrollAreaPrimitive.Root
+> & {
+  scrollbar?: ScrollbarProps;
+};
+
+export type ScrollbarProps = React.ComponentPropsWithoutRef<
+  typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+> &
+  VariantProps<typeof getScrollAreaThumbClasses>;

package/src/index.ts

@@ -1,6 +1,7 @@
 /** actions */
 export * from "./components/Button";
 export * from "./components/Breadcrumbs";
+export * from "./components/Pagination";
 export * from "./components/Toggle";
 export * from "./components/ToggleGroup";
 
@@ -14,6 +15,7 @@ export * from "./components/Calendar";
 export * from "./components/Collapsible";
 export * from "./components/Description";
 export * from "./components/Progress";
+export * from "./components/ScrollArea";
 export * from "./components/Separator";
 export * from "./components/Sonner";
 export * from "./components/Tabs";

package/vitest-setup.ts

@@ -12,6 +12,9 @@ const ResizeObserverMock = vi.fn(() => ({
 // Stub the global ResizeObserver
 vi.stubGlobal("ResizeObserver", ResizeObserverMock);
 
+// Mock the scrollTo method
+vi.stubGlobal("scrollTo", vi.fn());
+
 // runs a cleanup after each test case (e.g. clearing jsdom)
 afterEach(() => {
   cleanup();