@codefast/ui 0.0.8 → 0.0.9

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

@@ -6,20 +6,20 @@ import { cn } from "./utils";
  * Component: Container
  * -------------------------------------------------------------------------- */
 
-const Container = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & {
-    asChild?: boolean;
-  }
->(({ className, asChild, ...props }, ref) => {
-  const Comp = asChild ? Slot : "div";
+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} />;
-});
+    return <Comp ref={ref} className={cn("container", className)} {...props} />;
+  },
+);
 Container.displayName = "Container";
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Container };
+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,
 };

package/src/data-table.tsx

@@ -36,11 +36,12 @@ import { cn } from "./utils";
  * Component: DataTableViewOptions
  * -------------------------------------------------------------------------- */
 
+interface DataTableViewOptionsProps<TData> {
+  table: ReactTable.Table<TData>;
+}
 function DataTableViewOptions<TData>({
   table,
-}: {
-  table: ReactTable.Table<TData>;
-}): React.JSX.Element {
+}: DataTableViewOptionsProps<TData>): React.JSX.Element {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -85,13 +86,15 @@ function DataTableViewOptions<TData>({
  * Component: DataTablePagination
  * -------------------------------------------------------------------------- */
 
+interface DataTablePaginationProps<TData>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  table: ReactTable.Table<TData>;
+}
 function DataTablePagination<TData>({
   table,
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement> & {
-  table: ReactTable.Table<TData>;
-}): React.JSX.Element {
+}: DataTablePaginationProps<TData>): React.JSX.Element {
   return (
     <div
       className={cn("flex items-center justify-between px-2", className)}
@@ -183,14 +186,16 @@ function DataTablePagination<TData>({
  * Component: DataTableColumnHeader
  * -------------------------------------------------------------------------- */
 
+interface DataTableColumnHeaderProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  column: ReactTable.Column<TData, TValue>;
+  title: string;
+}
 function DataTableColumnHeader<TData, TValue>({
   column,
   title,
   className,
-}: React.HTMLAttributes<HTMLDivElement> & {
-  column: ReactTable.Column<TData, TValue>;
-  title: string;
-}): React.JSX.Element {
+}: DataTableColumnHeaderProps<TData, TValue>): React.JSX.Element {
   if (!column.getCanSort()) {
     return <div className={cn(className)}>{title}</div>;
   }
@@ -250,6 +255,13 @@ function DataTableColumnHeader<TData, TValue>({
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { DataTableViewOptions, DataTablePagination, DataTableColumnHeader };
+export {
+  DataTableViewOptions,
+  DataTablePagination,
+  DataTableColumnHeader,
+  type DataTableViewOptionsProps,
+  type DataTablePaginationProps,
+  type DataTableColumnHeaderProps,
+};
 
 export * from "@tanstack/react-table";

package/src/dialog.tsx

@@ -9,27 +9,31 @@ import { cn } from "./utils";
  * Component: Dialog
  * -------------------------------------------------------------------------- */
 
+type DialogProps = DialogPrimitive.DialogProps;
 const Dialog = DialogPrimitive.Root;
 
 /* -----------------------------------------------------------------------------
  * Component: DialogTrigger
  * -------------------------------------------------------------------------- */
 
+type DialogTriggerProps = DialogPrimitive.DialogTriggerProps;
 const DialogTrigger = DialogPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
  * Component: DialogClose
  * -------------------------------------------------------------------------- */
 
+type DialogCloseProps = DialogPrimitive.DialogCloseProps;
 const DialogClose = DialogPrimitive.Close;
 
 /* -----------------------------------------------------------------------------
  * Component: DialogContent
  * -------------------------------------------------------------------------- */
 
+type DialogContentProps = DialogPrimitive.DialogContentProps;
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  DialogPrimitive.DialogContentProps
+  DialogContentProps
 >(({ className, children, ...props }, ref) => (
   <DialogPrimitive.Portal>
     <DialogPrimitive.Overlay
@@ -63,10 +67,11 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
  * Component: DialogHeader
  * -------------------------------------------------------------------------- */
 
+type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 function DialogHeader({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element {
+}: DialogHeaderProps): React.JSX.Element {
   return (
     <div
       className={cn(
@@ -82,10 +87,11 @@ function DialogHeader({
  * Component: DialogFooter
  * -------------------------------------------------------------------------- */
 
+type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
 function DialogFooter({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element {
+}: DialogFooterProps): React.JSX.Element {
   return (
     <div
       className={cn(
@@ -101,9 +107,10 @@ function DialogFooter({
  * Component: DialogTitle
  * -------------------------------------------------------------------------- */
 
+type DialogTitleProps = DialogPrimitive.DialogTitleProps;
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
-  DialogPrimitive.DialogTitleProps
+  DialogTitleProps
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
@@ -120,9 +127,10 @@ DialogTitle.displayName = DialogPrimitive.Title.displayName;
  * Component: DialogDescription
  * -------------------------------------------------------------------------- */
 
+type DialogDescriptionProps = DialogPrimitive.DialogDescriptionProps;
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
-  DialogPrimitive.DialogDescriptionProps
+  DialogDescriptionProps
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
@@ -145,4 +153,12 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
+  type DialogProps,
+  type DialogTriggerProps,
+  type DialogCloseProps,
+  type DialogContentProps,
+  type DialogHeaderProps,
+  type DialogFooterProps,
+  type DialogTitleProps,
+  type DialogDescriptionProps,
 };

package/src/drawer.tsx

@@ -8,10 +8,11 @@ import { cn } from "./utils";
  * Component: Drawer
  * -------------------------------------------------------------------------- */
 
+type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>;
 function Drawer({
   shouldScaleBackground = true,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>): React.JSX.Element {
+}: DrawerProps): React.JSX.Element {
   return (
     <DrawerPrimitive.Root
       shouldScaleBackground={shouldScaleBackground}
@@ -24,21 +25,26 @@ function Drawer({
  * Component: DrawerTrigger
  * -------------------------------------------------------------------------- */
 
+type DrawerTriggerProps = React.ComponentProps<typeof DrawerPrimitive.Trigger>;
 const DrawerTrigger = DrawerPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
  * Component: DrawerClose
  * -------------------------------------------------------------------------- */
 
+type DrawerCloseProps = React.ComponentProps<typeof DrawerPrimitive.Close>;
 const DrawerClose = DrawerPrimitive.Close;
 
 /* -----------------------------------------------------------------------------
  * Component: DrawerContent
  * -------------------------------------------------------------------------- */
 
+type DrawerContentProps = React.ComponentPropsWithoutRef<
+  typeof DrawerPrimitive.Content
+>;
 const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+  DrawerContentProps
 >(({ className, children, ...props }, ref) => (
   <DrawerPrimitive.Portal>
     <DrawerPrimitive.Overlay className="fixed inset-0 z-50 bg-black/80" />
@@ -61,10 +67,11 @@ DrawerContent.displayName = "DrawerContent";
  * Component: DrawerHeader
  * -------------------------------------------------------------------------- */
 
+type DrawerHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 function DrawerHeader({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element {
+}: DrawerHeaderProps): React.JSX.Element {
   return (
     <div
       className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
@@ -77,10 +84,11 @@ function DrawerHeader({
  * Component: DrawerFooter
  * -------------------------------------------------------------------------- */
 
+type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;
 function DrawerFooter({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element {
+}: DrawerFooterProps): React.JSX.Element {
   return (
     <div
       className={cn("mt-auto flex flex-col gap-2 p-4", className)}
@@ -93,9 +101,12 @@ function DrawerFooter({
  * Component: DrawerTitle
  * -------------------------------------------------------------------------- */
 
+type DrawerTitleProps = React.ComponentPropsWithoutRef<
+  typeof DrawerPrimitive.Title
+>;
 const DrawerTitle = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+  DrawerTitleProps
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Title
     ref={ref}
@@ -112,9 +123,12 @@ DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
  * Component: DrawerDescription
  * -------------------------------------------------------------------------- */
 
+type DrawerDescriptionProps = React.ComponentPropsWithoutRef<
+  typeof DrawerPrimitive.Description
+>;
 const DrawerDescription = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+  DrawerDescriptionProps
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Description
     ref={ref}
@@ -137,4 +151,12 @@ export {
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
+  type DrawerProps,
+  type DrawerTriggerProps,
+  type DrawerCloseProps,
+  type DrawerContentProps,
+  type DrawerHeaderProps,
+  type DrawerFooterProps,
+  type DrawerTitleProps,
+  type DrawerDescriptionProps,
 };