@codefast/ui 0.0.7 → 0.0.9

package/src/carousel.tsx

@@ -6,7 +6,7 @@ import useEmblaCarousel, {
 } from "embla-carousel-react";
 import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
 import { cn } from "./utils";
-import { Button } from "./button";
+import { Button, type ButtonProps } from "./button";
 
 /* -----------------------------------------------------------------------------
  * Context: Carousel
@@ -17,7 +17,7 @@ type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
 type CarouselOptions = UseCarouselParameters[0];
 type CarouselPlugin = UseCarouselParameters[1];
 
-interface CarouselProps {
+interface BaseCarouselProps {
   opts?: CarouselOptions;
   plugins?: CarouselPlugin;
   orientation?: "horizontal" | "vertical";
@@ -31,7 +31,7 @@ type CarouselContextProps = {
   scrollNext: () => void;
   canScrollPrev: boolean;
   canScrollNext: boolean;
-} & CarouselProps;
+} & BaseCarouselProps;
 
 const CarouselContext = React.createContext<CarouselContextProps | null>(null);
 
@@ -49,10 +49,8 @@ function useCarousel(): CarouselContextProps {
  * Component: Carousel
  * -------------------------------------------------------------------------- */
 
-const Carousel = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
+type CarouselProps = React.HTMLAttributes<HTMLDivElement> & BaseCarouselProps;
+const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
   (
     { orientation, opts, setApi, plugins, className, children, ...props },
     ref,
@@ -153,61 +151,62 @@ Carousel.displayName = "Carousel";
  * Component: CarouselContent
  * -------------------------------------------------------------------------- */
 
-const CarouselContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel();
+type CarouselContentProps = React.HTMLAttributes<HTMLDivElement>;
+const CarouselContent = React.forwardRef<HTMLDivElement, CarouselContentProps>(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
 
-  return (
-    <div ref={carouselRef} className="overflow-hidden">
-      <div
-        ref={ref}
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className,
-        )}
-        {...props}
-      />
-    </div>
-  );
-});
+    return (
+      <div ref={carouselRef} className="overflow-hidden">
+        <div
+          ref={ref}
+          className={cn(
+            "flex",
+            orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+            className,
+          )}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
 CarouselContent.displayName = "CarouselContent";
 
 /* -----------------------------------------------------------------------------
  * Component: CarouselItem
  * -------------------------------------------------------------------------- */
 
-const CarouselItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel();
+type CarouselItemProps = React.HTMLAttributes<HTMLDivElement>;
+const CarouselItem = React.forwardRef<HTMLDivElement, CarouselItemProps>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
 
-  return (
-    <div
-      ref={ref}
-      role="group"
-      aria-roledescription="slide"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
+    return (
+      <div
+        ref={ref}
+        role="group"
+        aria-roledescription="slide"
+        className={cn(
+          "min-w-0 shrink-0 grow-0 basis-full",
+          orientation === "horizontal" ? "pl-4" : "pt-4",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
 CarouselItem.displayName = "CarouselItem";
 
 /* -----------------------------------------------------------------------------
  * Component: CarouselPrevious
  * -------------------------------------------------------------------------- */
 
+type CarouselPreviousProps = ButtonProps;
 const CarouselPrevious = React.forwardRef<
   HTMLButtonElement,
-  React.ComponentProps<typeof Button>
+  CarouselPreviousProps
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
@@ -238,33 +237,33 @@ CarouselPrevious.displayName = "CarouselPrevious";
  * Component: CarouselNext
  * -------------------------------------------------------------------------- */
 
-const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
+type CarouselNextProps = ButtonProps;
+const CarouselNext = React.forwardRef<HTMLButtonElement, CarouselNextProps>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
 
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute size-8 rounded-full",
-        orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className,
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRightIcon className="size-4" />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  );
-});
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute size-8 rounded-full",
+          orientation === "horizontal"
+            ? "-right-12 top-1/2 -translate-y-1/2"
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        {...props}
+      >
+        <ArrowRightIcon className="size-4" />
+        <span className="sr-only">Next slide</span>
+      </Button>
+    );
+  },
+);
 CarouselNext.displayName = "CarouselNext";
 
 /* -----------------------------------------------------------------------------
@@ -278,4 +277,9 @@ export {
   CarouselItem,
   CarouselPrevious,
   CarouselNext,
+  type CarouselProps,
+  type CarouselContentProps,
+  type CarouselItemProps,
+  type CarouselPreviousProps,
+  type CarouselNextProps,
 };

package/src/checkbox.tsx

@@ -9,9 +9,10 @@ import { cn } from "./utils";
  * Component: Checkbox
  * -------------------------------------------------------------------------- */
 
+type CheckboxProps = CheckboxPrimitive.CheckboxProps;
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
-  CheckboxPrimitive.CheckboxProps
+  CheckboxProps
 >(({ className, ...props }, ref) => (
   <CheckboxPrimitive.Root
     ref={ref}
@@ -32,4 +33,4 @@ Checkbox.displayName = CheckboxPrimitive.Root.displayName;
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Checkbox };
+export { Checkbox, type CheckboxProps };

package/src/code.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+/* -----------------------------------------------------------------------------
+ * Component: Code
+ * -------------------------------------------------------------------------- */
+
+interface CodeProps extends React.HTMLAttributes<HTMLElement> {
+  asChild?: boolean;
+}
+const Code = React.forwardRef<HTMLElement, CodeProps>(
+  ({ asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "code";
+
+    return <Comp ref={ref} {...props} />;
+  },
+);
+Code.displayName = "Code";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Code, type CodeProps };

package/src/collapsible.tsx

@@ -6,22 +6,32 @@ import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
  * Component: Collapsible
  * -------------------------------------------------------------------------- */
 
+type CollapsibleProps = CollapsiblePrimitive.CollapsibleProps;
 const Collapsible = CollapsiblePrimitive.Root;
 
 /* -----------------------------------------------------------------------------
  * Component: CollapsibleTrigger
  * -------------------------------------------------------------------------- */
 
+type CollapsibleTriggerProps = CollapsiblePrimitive.CollapsibleTriggerProps;
 const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 
 /* -----------------------------------------------------------------------------
  * Component: CollapsibleContent
  * -------------------------------------------------------------------------- */
 
+type CollapsibleContentProps = CollapsiblePrimitive.CollapsibleContentProps;
 const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  type CollapsibleProps,
+  type CollapsibleTriggerProps,
+  type CollapsibleContentProps,
+};

package/src/command.tsx

@@ -11,9 +11,10 @@ import { Dialog, DialogContent } from "./dialog";
  * Component: Command
  * -------------------------------------------------------------------------- */
 
+type CommandProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive>;
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+  CommandProps
 >(({ className, ...props }, ref) => (
   <CommandPrimitive
     ref={ref}
@@ -30,7 +31,11 @@ Command.displayName = CommandPrimitive.displayName;
  * Component: CommandDialog
  * -------------------------------------------------------------------------- */
 
-function CommandDialog({ children, ...props }: DialogProps): React.JSX.Element {
+type CommandDialogProps = DialogProps;
+function CommandDialog({
+  children,
+  ...props
+}: CommandDialogProps): React.JSX.Element {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0">
@@ -46,9 +51,12 @@ function CommandDialog({ children, ...props }: DialogProps): React.JSX.Element {
  * Component: CommandInput
  * -------------------------------------------------------------------------- */
 
+type CommandInputProps = React.ComponentPropsWithoutRef<
+  typeof CommandPrimitive.Input
+>;
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+  CommandInputProps
 >(({ className, ...props }, ref) => (
   <div className="flex items-center gap-2 border-b px-3" cmdk-input-wrapper="">
     <MagnifyingGlassIcon className="size-4 shrink-0 opacity-50" />
@@ -68,9 +76,12 @@ CommandInput.displayName = CommandPrimitive.Input.displayName;
  * Component: CommandList
  * -------------------------------------------------------------------------- */
 
+type CommandListProps = React.ComponentPropsWithoutRef<
+  typeof CommandPrimitive.List
+>;
 const CommandList = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+  CommandListProps
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
@@ -84,9 +95,12 @@ CommandList.displayName = CommandPrimitive.List.displayName;
  * Component: CommandEmpty
  * -------------------------------------------------------------------------- */
 
+type CommandEmptyProps = React.ComponentPropsWithoutRef<
+  typeof CommandPrimitive.Empty
+>;
 const CommandEmpty = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+  CommandEmptyProps
 >((props, ref) => (
   <CommandPrimitive.Empty
     ref={ref}
@@ -100,9 +114,12 @@ CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
  * Component: CommandGroup
  * -------------------------------------------------------------------------- */
 
+type CommandGroupProps = React.ComponentPropsWithoutRef<
+  typeof CommandPrimitive.Group
+>;
 const CommandGroup = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+  CommandGroupProps
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Group
     ref={ref}
@@ -119,9 +136,12 @@ CommandGroup.displayName = CommandPrimitive.Group.displayName;
  * Component: CommandSeparator
  * -------------------------------------------------------------------------- */
 
+type CommandSeparatorProps = React.ComponentPropsWithoutRef<
+  typeof CommandPrimitive.Separator
+>;
 const CommandSeparator = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+  CommandSeparatorProps
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
@@ -135,9 +155,12 @@ CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
  * Component: CommandItem
  * -------------------------------------------------------------------------- */
 
+type CommandItemProps = React.ComponentPropsWithoutRef<
+  typeof CommandPrimitive.Item
+>;
 const CommandItem = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+  CommandItemProps
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Item
     ref={ref}
@@ -154,9 +177,12 @@ CommandItem.displayName = CommandPrimitive.Item.displayName;
  * Component: CommandLoading
  * -------------------------------------------------------------------------- */
 
+type CommandLoadingProps = React.ComponentPropsWithoutRef<
+  typeof CommandPrimitive.Loading
+>;
 const CommandLoading = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Loading>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Loading>
+  CommandLoadingProps
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Loading
     ref={ref}
@@ -170,10 +196,11 @@ CommandLoading.displayName = CommandPrimitive.Loading.displayName;
  * Component: CommandShortcut
  * -------------------------------------------------------------------------- */
 
+type CommandShortcutProps = React.HTMLAttributes<HTMLSpanElement>;
 function CommandShortcut({
   className,
   ...props
-}: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element {
+}: CommandShortcutProps): React.JSX.Element {
   return (
     <span
       className={cn(
@@ -200,4 +227,14 @@ export {
   CommandLoading,
   CommandShortcut,
   CommandSeparator,
+  type CommandProps,
+  type CommandDialogProps,
+  type CommandInputProps,
+  type CommandListProps,
+  type CommandEmptyProps,
+  type CommandGroupProps,
+  type CommandItemProps,
+  type CommandLoadingProps,
+  type CommandShortcutProps,
+  type CommandSeparatorProps,
 };

package/src/container.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Container
+ * -------------------------------------------------------------------------- */
+
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean;
+}
+const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
+  ({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+
+    return <Comp ref={ref} className={cn("container", className)} {...props} />;
+  },
+);
+Container.displayName = "Container";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Container, type ContainerProps };

package/src/context-menu.tsx

@@ -13,41 +13,49 @@ import { cn } from "./utils";
  * Component: ContextMenu
  * -------------------------------------------------------------------------- */
 
+type ContextMenuProps = ContextMenuPrimitive.ContextMenuProps;
 const ContextMenu = ContextMenuPrimitive.Root;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuTrigger
  * -------------------------------------------------------------------------- */
 
+type ContextMenuTriggerProps = ContextMenuPrimitive.ContextMenuTriggerProps;
 const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuGroup
  * -------------------------------------------------------------------------- */
 
+type ContextMenuGroupProps = ContextMenuPrimitive.ContextMenuGroupProps;
 const ContextMenuGroup = ContextMenuPrimitive.Group;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuSub
  * -------------------------------------------------------------------------- */
 
+type ContextMenuSubProps = ContextMenuPrimitive.ContextMenuSubProps;
 const ContextMenuSub = ContextMenuPrimitive.Sub;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuRadioGroup
  * -------------------------------------------------------------------------- */
 
+type ContextMenuRadioGroupProps =
+  ContextMenuPrimitive.ContextMenuRadioGroupProps;
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuSubTrigger
  * -------------------------------------------------------------------------- */
 
+interface ContextMenuSubTriggerProps
+  extends ContextMenuPrimitive.ContextMenuSubTriggerProps {
+  inset?: boolean;
+}
 const ContextMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  ContextMenuPrimitive.ContextMenuSubTriggerProps & {
-    inset?: boolean;
-  }
+  ContextMenuSubTriggerProps
 >(({ className, inset, children, ...props }, ref) => (
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
@@ -68,9 +76,11 @@ ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
  * Component: ContextMenuSubContent
  * -------------------------------------------------------------------------- */
 
+type ContextMenuSubContentProps =
+  ContextMenuPrimitive.ContextMenuSubContentProps;
 const ContextMenuSubContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-  ContextMenuPrimitive.ContextMenuSubContentProps
+  ContextMenuSubContentProps
 >(({ className, ...props }, ref) => (
   <ContextMenuPrimitive.Portal>
     <ContextMenuPrimitive.SubContent
@@ -89,9 +99,10 @@ ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
  * Component: ContextMenuContent
  * -------------------------------------------------------------------------- */
 
+type ContextMenuContentProps = ContextMenuPrimitive.ContextMenuContentProps;
 const ContextMenuContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Content>,
-  ContextMenuPrimitive.ContextMenuContentProps
+  ContextMenuContentProps
 >(({ className, ...props }, ref) => (
   <ContextMenuPrimitive.Portal>
     <ContextMenuPrimitive.Content
@@ -110,11 +121,13 @@ ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
  * Component: ContextMenuItem
  * -------------------------------------------------------------------------- */
 
+interface ContextMenuItemProps
+  extends ContextMenuPrimitive.ContextMenuItemProps {
+  inset?: boolean;
+}
 const ContextMenuItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Item>,
-  ContextMenuPrimitive.ContextMenuItemProps & {
-    inset?: boolean;
-  }
+  ContextMenuItemProps
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Item
     ref={ref}
@@ -132,9 +145,11 @@ ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
  * Component: ContextMenuCheckboxItem
  * -------------------------------------------------------------------------- */
 
+type ContextMenuCheckboxItemProps =
+  ContextMenuPrimitive.ContextMenuCheckboxItemProps;
 const ContextMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  ContextMenuPrimitive.ContextMenuCheckboxItemProps
+  ContextMenuCheckboxItemProps
 >(({ className, children, checked, ...props }, ref) => (
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
@@ -160,9 +175,10 @@ ContextMenuCheckboxItem.displayName =
  * Component: ContextMenuRadioItem
  * -------------------------------------------------------------------------- */
 
+type ContextMenuRadioItemProps = ContextMenuPrimitive.ContextMenuRadioItemProps;
 const ContextMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-  ContextMenuPrimitive.ContextMenuRadioItemProps
+  ContextMenuRadioItemProps
 >(({ className, children, ...props }, ref) => (
   <ContextMenuPrimitive.RadioItem
     ref={ref}
@@ -186,11 +202,13 @@ ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
  * Component: ContextMenuLabel
  * -------------------------------------------------------------------------- */
 
+interface ContextMenuLabelProps
+  extends ContextMenuPrimitive.ContextMenuLabelProps {
+  inset?: boolean;
+}
 const ContextMenuLabel = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  ContextMenuPrimitive.ContextMenuLabelProps & {
-    inset?: boolean;
-  }
+  ContextMenuLabelProps
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Label
     ref={ref}
@@ -208,9 +226,10 @@ ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
  * Component: ContextMenuSeparator
  * -------------------------------------------------------------------------- */
 
+type ContextMenuSeparatorProps = ContextMenuPrimitive.ContextMenuSeparatorProps;
 const ContextMenuSeparator = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-  ContextMenuPrimitive.ContextMenuSeparatorProps
+  ContextMenuSeparatorProps
 >(({ className, ...props }, ref) => (
   <ContextMenuPrimitive.Separator
     ref={ref}
@@ -224,10 +243,11 @@ ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
  * Component: ContextMenuShortcut
  * -------------------------------------------------------------------------- */
 
+type ContextMenuShortcutProps = React.HTMLAttributes<HTMLSpanElement>;
 function ContextMenuShortcut({
   className,
   ...props
-}: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element {
+}: ContextMenuShortcutProps): React.JSX.Element {
   return (
     <span
       className={cn(
@@ -243,9 +263,10 @@ function ContextMenuShortcut({
  * Component: ContextMenuArrow
  * -------------------------------------------------------------------------- */
 
+type ContextMenuArrowProps = ContextMenuPrimitive.ContextMenuArrowProps;
 const ContextMenuArrow = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Arrow>,
-  ContextMenuPrimitive.ContextMenuArrowProps
+  ContextMenuArrowProps
 >(({ className, ...props }, ref) => (
   <ContextMenuPrimitive.Arrow
     ref={ref}
@@ -275,4 +296,19 @@ export {
   ContextMenuSubTrigger,
   ContextMenuRadioGroup,
   ContextMenuArrow,
+  type ContextMenuProps,
+  type ContextMenuTriggerProps,
+  type ContextMenuContentProps,
+  type ContextMenuItemProps,
+  type ContextMenuCheckboxItemProps,
+  type ContextMenuRadioItemProps,
+  type ContextMenuLabelProps,
+  type ContextMenuSeparatorProps,
+  type ContextMenuShortcutProps,
+  type ContextMenuGroupProps,
+  type ContextMenuSubProps,
+  type ContextMenuSubContentProps,
+  type ContextMenuSubTriggerProps,
+  type ContextMenuRadioGroupProps,
+  type ContextMenuArrowProps,
 };