@mbao01/common 0.0.17 → 0.0.19

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

@@ -1,5 +1,5 @@
 export declare const getAvatarClasses: (props?: ({
-    size?: 4 | 8 | 12 | 16 | 24 | 32 | 48 | 64 | null | undefined;
+    size?: 16 | 4 | 8 | 12 | 24 | 32 | 48 | 64 | null | undefined;
     status?: "online" | "offline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const getAvatarImageClasses: (props?: ({
@@ -8,7 +8,7 @@ export declare const getAvatarImageClasses: (props?: ({
     ring?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const getAvatarFallbackClasses: (props?: ({
-    size?: 4 | 8 | 12 | 16 | 24 | 32 | 48 | 64 | null | undefined;
+    size?: 16 | 4 | 8 | 12 | 24 | 32 | 48 | 64 | null | undefined;
     variant?: "accent" | "default" | "error" | "ghost" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
     shape?: "circle" | "round" | "hexagon" | "triangle" | "television" | null | undefined;
     ring?: boolean | null | undefined;

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

@@ -1,6 +1,6 @@
 export declare const getSkeletonClasses: (props?: ({
     variant?: "pulse" | null | undefined;
-    width?: 4 | 8 | 12 | 16 | 24 | 32 | 48 | 64 | 2 | "full" | null | undefined;
-    height?: 4 | 8 | 12 | 16 | 24 | 32 | 48 | 64 | 2 | "full" | null | undefined;
+    width?: 16 | 2 | 4 | 8 | 12 | 24 | 32 | 48 | 64 | "full" | null | undefined;
+    height?: 16 | 2 | 4 | 8 | 12 | 24 | 32 | 48 | 64 | "full" | null | undefined;
     round?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & Omit<{
+    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;
+}, "variant" | "isLoading"> & {
+    variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { Toggle };

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

@@ -0,0 +1,3 @@
+export declare const getToggleClasses: (props?: ({
+    variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

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

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { type VariantProps } from "../../libs";
+import { getButtonClasses } from "../Button/constants";
+import { getToggleClasses } from "./constants";
+export type BaseToggleProps = Omit<VariantProps<typeof getButtonClasses>, "variant" | "isLoading"> & VariantProps<typeof getToggleClasses>;
+export type ToggleProps = React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & BaseToggleProps;

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import type { ToggleGroupProps } from "./types";
+declare const ToggleGroup: {
+    ({ className, variant, children, ...props }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+    Item: import("react").ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & Omit<{
+        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;
+    }, "variant" | "isLoading"> & {
+        variant?: "accent" | "default" | "error" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | undefined;
+    } & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export { ToggleGroup };

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

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

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

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

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { BaseToggleProps } from "../Toggle/types";
+export type ToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & Pick<BaseToggleProps, "variant">;
+export type ToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & BaseToggleProps;
+export type ToggleGroupContextType = Pick<BaseToggleProps, "variant">;

package/dist/types/index.d.ts

@@ -1,12 +1,16 @@
 /** actions */
 export * from "./components/Button";
 export * from "./components/Breadcrumbs";
+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/Separator";
@@ -23,6 +27,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.17",
+  "version": "0.0.19",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -60,10 +60,13 @@
     "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",
@@ -73,12 +76,15 @@
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toggle": "^1.0.3",
+    "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "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",
@@ -130,5 +136,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "626046c20b138596dc5bd520b29c885823531fb6"
+  "gitHead": "3bc7cfc3008d4e1a0f47a850aec1055455ec399a"
 }

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
+>;

package/src/components/Carousel/Carousel.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
+import type { CarouselApi, CarouselProps } from "./types";
+import { cn } from "../../utilities";
+import { Button } from "../Button";
+import {
+  getCarouselContentClasses,
+  getCarouselItemClasses,
+  getCarouselNextClasses,
+  getCarouselPreviousClasses,
+} from "./constants";
+import { CarouselContext } from "./CarouselContext";
+import { useCarousel } from "./useCarousel";
+
+const Carousel = ({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: CarouselProps & React.HTMLAttributes<HTMLDivElement>) => {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins
+  );
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  const onSelect = useCallback((api: CarouselApi) => {
+    if (!api) {
+      return;
+    }
+
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+  }, []);
+
+  const scrollPrev = useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+
+  const scrollNext = useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrev, scrollNext]
+  );
+
+  useEffect(() => {
+    if (!api || !setApi) {
+      return;
+    }
+
+    setApi(api);
+  }, [api, setApi]);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+};
+Carousel.displayName = "Carousel";
+
+const CarouselContent = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel();
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(getCarouselContentClasses({ orientation }), className)}
+        {...props}
+      />
+    </div>
+  );
+});
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(getCarouselItemClasses({ orientation }), className)}
+      {...props}
+    />
+  );
+});
+CarouselItem.displayName = "CarouselItem";
+
+const CarouselPrevious = forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "ghost", outline = true, ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      outline={outline}
+      variant={variant}
+      className={cn(getCarouselPreviousClasses({ orientation }), className)}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeftIcon className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+
+const CarouselNext = forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, outline = true, variant = "ghost", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      outline={outline}
+      variant={variant}
+      className={cn(getCarouselNextClasses({ orientation }), className)}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRightIcon className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+});
+CarouselNext.displayName = "CarouselNext";
+
+Carousel.Content = CarouselContent;
+Carousel.Item = CarouselItem;
+Carousel.Next = CarouselNext;
+Carousel.Previous = CarouselPrevious;
+
+export { Carousel };

package/src/components/Carousel/CarouselContext.ts

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

package/src/components/Carousel/constants.ts

@@ -0,0 +1,58 @@
+import { cva } from "../../libs";
+
+export const getCarouselContentClasses = cva("flex", {
+  variants: {
+    orientation: {
+      horizontal: "-ml-4",
+      vertical: "-mt-4 flex-col",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+export const getCarouselItemClasses = cva(
+  "min-w-0 shrink-0 grow-0 basis-full",
+  {
+    variants: {
+      orientation: {
+        horizontal: "pl-4",
+        vertical: "pt-4",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+);
+
+export const getCarouselNextClasses = cva(
+  "absolute h-8 w-8 rounded-full p-0 disabled:bg-transparent",
+  {
+    variants: {
+      orientation: {
+        horizontal: "-right-12 top-1/2 -translate-y-1/2",
+        vertical: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+);
+
+export const getCarouselPreviousClasses = cva(
+  "absolute h-8 w-8 rounded-full p-0 disabled:bg-transparent",
+  {
+    variants: {
+      orientation: {
+        horizontal: "-left-12 top-1/2 -translate-y-1/2",
+        vertical: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+);

package/src/components/Carousel/index.ts

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

package/src/components/Carousel/types.ts

@@ -0,0 +1,24 @@
+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;

package/src/components/Carousel/useCarousel.ts

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { CarouselContext } from "./CarouselContext";
+
+export function useCarousel() {
+  const context = useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+
+  return context;
+}

package/src/components/Collapsible/Collapsible.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { type CollapsibleProps } from "@radix-ui/react-accordion";
+
+const Collapsible = (props: CollapsibleProps) => (
+  <CollapsiblePrimitive.Root {...props} />
+);
+
+Collapsible.Trigger = CollapsiblePrimitive.CollapsibleTrigger;
+Collapsible.Content = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible };

package/src/components/Collapsible/index.ts

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

package/src/components/Collapsible/types.ts

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

package/src/components/HoverCard/HoverCard.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { cn } from "../../utilities";
+import { getHoverCardContentClasses } from "./constants";
+import { forwardRef } from "react";
+import { HoverCardProps } from "./types";
+
+const HoverCard = (props: HoverCardProps) => (
+  <HoverCardPrimitive.Root {...props} />
+);
+
+const HoverCardContent = forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(getHoverCardContentClasses(), className)}
+    {...props}
+  />
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+HoverCard.Content = HoverCardContent;
+HoverCard.Trigger = HoverCardPrimitive.Trigger;
+
+export { HoverCard };

package/src/components/HoverCard/constants.ts

@@ -0,0 +1,5 @@
+import { cva } from "../../libs";
+
+export const getHoverCardContentClasses = cva(
+  "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+);

package/src/components/HoverCard/index.ts

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

package/src/components/HoverCard/types.ts

@@ -0,0 +1,5 @@
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+
+export type HoverCardProps = React.ComponentPropsWithoutRef<
+  typeof HoverCardPrimitive.Root
+>;

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { type ToggleProps } from "./types";
+import { cn } from "../../utilities";
+import { getToggleClasses } from "./constants";
+import { getButtonClasses } from "../Button/constants";
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  ToggleProps
+>(({ className, variant = "default", size, wide, outline, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(
+      getButtonClasses({ size, wide, outline }),
+      getToggleClasses({ variant }),
+      className
+    )}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle };

package/src/components/Toggle/constants.ts

@@ -0,0 +1,21 @@
+import { cva } from "../../libs";
+
+export const getToggleClasses = cva(
+  "transition-colors disabled:pointer-events-none disabled:opacity-50 data-[state=off]:btn-ghost",
+  {
+    variants: {
+      variant: {
+        accent: "data-[state=on]:btn-accent",
+        default: "data-[state=on]:btn-default",
+        error: "data-[state=on]:btn-error",
+        info: "data-[state=on]:btn-info",
+        link: "data-[state=on]:btn-link",
+        neutral: "data-[state=on]:btn-neutral",
+        primary: "data-[state=on]:btn-primary",
+        secondary: "data-[state=on]:btn-secondary",
+        success: "data-[state=on]:btn-success",
+        warning: "data-[state=on]:btn-warning",
+      },
+    },
+  }
+);

package/src/components/Toggle/index.ts

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

package/src/components/Toggle/types.ts

@@ -0,0 +1,15 @@
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { type VariantProps } from "../../libs";
+import { getButtonClasses } from "../Button/constants";
+import { getToggleClasses } from "./constants";
+
+export type BaseToggleProps = Omit<
+  VariantProps<typeof getButtonClasses>,
+  "variant" | "isLoading"
+> &
+  VariantProps<typeof getToggleClasses>;
+
+export type ToggleProps = React.ComponentPropsWithoutRef<
+  typeof TogglePrimitive.Root
+> &
+  BaseToggleProps;

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { createContext, forwardRef, useContext } from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import type {
+  ToggleGroupContextType,
+  ToggleGroupItemProps,
+  ToggleGroupProps,
+} from "./types";
+import { cn } from "../../utilities";
+import { getToggleClasses } from "../Toggle/constants";
+import { getToggleGroupClasses } from "./constants";
+import { getButtonClasses } from "../Button/constants";
+
+const ToggleGroupContext = createContext<ToggleGroupContextType>({
+  variant: "default",
+});
+
+const ToggleGroup = ({
+  className,
+  variant,
+  children,
+  ...props
+}: ToggleGroupProps) => (
+  <ToggleGroupPrimitive.Root
+    className={cn(getToggleGroupClasses(), className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+);
+
+const ToggleGroupItem = forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  ToggleGroupItemProps
+>(({ className, children, variant, size, wide, outline, ...props }, ref) => {
+  const context = useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        getButtonClasses({ size, wide, outline }),
+        getToggleClasses({
+          variant: context.variant ?? variant,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+ToggleGroup.Item = ToggleGroupItem;
+
+export { ToggleGroup };

package/src/components/ToggleGroup/constants.ts

@@ -0,0 +1,5 @@
+import { cva } from "../../libs";
+
+export const getToggleGroupClasses = cva(
+  "flex items-center justify-center gap-1"
+);

package/src/components/ToggleGroup/index.ts

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

package/src/components/ToggleGroup/types.ts

@@ -0,0 +1,14 @@
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { BaseToggleProps } from "../Toggle/types";
+
+export type ToggleGroupProps = React.ComponentPropsWithoutRef<
+  typeof ToggleGroupPrimitive.Root
+> &
+  Pick<BaseToggleProps, "variant">;
+
+export type ToggleGroupItemProps = React.ComponentPropsWithoutRef<
+  typeof ToggleGroupPrimitive.Item
+> &
+  BaseToggleProps;
+
+export type ToggleGroupContextType = Pick<BaseToggleProps, "variant">;

package/src/index.ts

@@ -1,13 +1,17 @@
 /** actions */
 export * from "./components/Button";
 export * from "./components/Breadcrumbs";
+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/Separator";
@@ -27,6 +31,7 @@ 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";