@mbao01/common 0.0.18 → 0.0.20

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import type { AccordionProps } from "./types";
+declare const Accordion: {
+    (props: AccordionProps): import("react/jsx-runtime").JSX.Element;
+    Item: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { Accordion };

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

@@ -0,0 +1,3 @@
+export declare const getAccordionItemClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const getAccordionTriggerClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const getAccordionContentClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

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

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

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+export type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>;
+export type AccordionContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>;
+export type AccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;
+export type AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>;

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

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import type { CarouselProps } from "./types";
+declare const Carousel: {
+    ({ orientation, opts, setApi, plugins, className, children, ...props }: CarouselProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    Content: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Next: import("react").ForwardRefExoticComponent<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+        variant?: "accent" | "default" | "error" | "ghost" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | undefined;
+        outline?: boolean | undefined;
+        wide?: boolean | undefined;
+        size?: "xs" | "sm" | "md" | "lg" | undefined;
+        isLoading?: boolean | undefined;
+    } & {
+        as?: "a" | "span" | "p" | undefined;
+    } & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Previous: import("react").ForwardRefExoticComponent<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+        variant?: "accent" | "default" | "error" | "ghost" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | undefined;
+        outline?: boolean | undefined;
+        wide?: boolean | undefined;
+        size?: "xs" | "sm" | "md" | "lg" | undefined;
+        isLoading?: boolean | undefined;
+    } & {
+        as?: "a" | "span" | "p" | undefined;
+    } & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export { Carousel };

package/dist/types/components/Carousel/CarouselContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type CarouselContextProps } from "./types";
+export declare const CarouselContext: import("react").Context<CarouselContextProps | null>;

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

@@ -0,0 +1,12 @@
+export declare const getCarouselContentClasses: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const getCarouselItemClasses: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const getCarouselNextClasses: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const getCarouselPreviousClasses: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

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

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

@@ -0,0 +1,21 @@
+import { type UseEmblaCarouselType } from "embla-carousel-react";
+import useEmblaCarousel from "embla-carousel-react";
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+export type CarouselApi = UseEmblaCarouselType[1];
+export type CarouselProps = {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugin;
+    orientation?: "horizontal" | "vertical";
+    setApi?: (api: CarouselApi) => void;
+};
+export type CarouselContextProps = {
+    carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+    api: ReturnType<typeof useEmblaCarousel>[1];
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    canScrollPrev: boolean;
+    canScrollNext: boolean;
+} & CarouselProps;
+export {};

package/dist/types/components/Carousel/useCarousel.d.ts

@@ -0,0 +1 @@
+export declare function useCarousel(): import("./types").CarouselContextProps;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { type CollapsibleProps } from "@radix-ui/react-accordion";
+declare const Collapsible: {
+    (props: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
+    Trigger: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export { Collapsible };

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

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+export type CollapsibleProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>;

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/HoverCard/HoverCard.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { HoverCardProps } from "./types";
+declare const HoverCard: {
+    (props: HoverCardProps): import("react/jsx-runtime").JSX.Element;
+    Content: import("react").ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & import("react").RefAttributes<HTMLAnchorElement>>;
+};
+export { HoverCard };

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

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

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

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+export type HoverCardProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.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,15 +1,20 @@
 /** actions */
 export * from "./components/Button";
 export * from "./components/Breadcrumbs";
+export * from "./components/Pagination";
 export * from "./components/Toggle";
+export * from "./components/ToggleGroup";
 /** data display */
+export * from "./components/Accordion";
 export * from "./components/Alert";
 export * from "./components/Avatar";
 export * from "./components/Badge";
 export * from "./components/Card";
 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";
@@ -24,6 +29,7 @@ export * from "./components/Skeleton";
 export * from "./components/Tooltip";
 /** composable */
 export * from "./components/AlertDialog";
-export * from "./components/Dialog";
 export * from "./components/Command";
+export * from "./components/Dialog";
+export * from "./components/HoverCard";
 export * from "./components/Popover";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.18",
+  "version": "0.0.20",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -60,14 +60,18 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-icons": "^1.3.0",
     "@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",
@@ -81,11 +85,13 @@
     "cmdk": "^1.0.0",
     "daisyui": "^4.6.2",
     "date-fns": "^3.6.0",
+    "embla-carousel-react": "^8.0.2",
     "react-day-picker": "^8.10.0",
     "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",
@@ -132,5 +138,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "9bc26c6619e27427b22532be6aa94ea63817c0b1"
+  "gitHead": "957331eff1e44996fb087ad2feef3052d2e1a3f7"
 }

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import type {
+  AccordionProps,
+  AccordionContentProps,
+  AccordionItemProps,
+  AccordionTriggerProps,
+} from "./types";
+import { cn } from "../../utilities";
+import {
+  getAccordionContentClasses,
+  getAccordionItemClasses,
+  getAccordionTriggerClasses,
+} from "./constants";
+
+const Accordion = (props: AccordionProps) => (
+  <AccordionPrimitive.Root {...props} />
+);
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  AccordionItemProps
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn(getAccordionItemClasses(), className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  AccordionTriggerProps
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(getAccordionTriggerClasses(), className)}
+      {...props}
+    >
+      {children}
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  AccordionContentProps
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(getAccordionContentClasses())}
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+Accordion.Item = AccordionItem;
+Accordion.Trigger = AccordionTrigger;
+Accordion.Content = AccordionContent;
+
+export { Accordion };

package/src/components/Accordion/constants.ts

@@ -0,0 +1,11 @@
+import { cva } from "../../libs";
+
+export const getAccordionItemClasses = cva("border-b");
+
+export const getAccordionTriggerClasses = cva(
+  "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all [&:hover:not(:disabled)]:underline disabled:opacity-50 [&[data-state=open]>svg]:rotate-180"
+);
+
+export const getAccordionContentClasses = cva(
+  "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+);

package/src/components/Accordion/index.ts

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

package/src/components/Accordion/types.ts

@@ -0,0 +1,17 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+
+export type AccordionProps = React.ComponentPropsWithoutRef<
+  typeof AccordionPrimitive.Root
+>;
+
+export type AccordionContentProps = React.ComponentPropsWithoutRef<
+  typeof AccordionPrimitive.Content
+>;
+
+export type AccordionItemProps = React.ComponentPropsWithoutRef<
+  typeof AccordionPrimitive.Item
+>;
+
+export type AccordionTriggerProps = React.ComponentPropsWithoutRef<
+  typeof AccordionPrimitive.Trigger
+>;