@codefast/ui 0.0.7 → 0.0.9

package/src/hover-card.tsx

@@ -8,21 +8,24 @@ import { cn } from "./utils";
  * Component: HoverCard
  * -------------------------------------------------------------------------- */
 
+type HoverCardProps = HoverCardPrimitive.HoverCardProps;
 const HoverCard = HoverCardPrimitive.Root;
 
 /* -----------------------------------------------------------------------------
  * Component: HoverCardTrigger
  * -------------------------------------------------------------------------- */
 
+type HoverCardTriggerProps = HoverCardPrimitive.HoverCardTriggerProps;
 const HoverCardTrigger = HoverCardPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
  * Component: HoverCardContent
  * -------------------------------------------------------------------------- */
 
+type HoverCardContentProps = HoverCardPrimitive.HoverCardContentProps;
 const HoverCardContent = React.forwardRef<
   React.ElementRef<typeof HoverCardPrimitive.Content>,
-  HoverCardPrimitive.HoverCardContentProps
+  HoverCardContentProps
 >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
   <HoverCardPrimitive.Portal>
     <HoverCardPrimitive.Content
@@ -43,4 +46,11 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { HoverCard, HoverCardTrigger, HoverCardContent };
+export {
+  HoverCard,
+  HoverCardTrigger,
+  HoverCardContent,
+  type HoverCardProps,
+  type HoverCardTriggerProps,
+  type HoverCardContentProps,
+};

package/src/input-otp.tsx

@@ -5,6 +5,8 @@ import { DotFilledIcon } from "@radix-ui/react-icons";
 import {
   OTPInput,
   OTPInputContext,
+  REGEXP_ONLY_CHARS,
+  REGEXP_ONLY_DIGITS,
   REGEXP_ONLY_DIGITS_AND_CHARS,
 } from "input-otp";
 import { cn } from "./utils";
@@ -13,9 +15,10 @@ import { cn } from "./utils";
  * Component: InputOtp
  * -------------------------------------------------------------------------- */
 
+type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput>;
 const InputOTP = React.forwardRef<
   React.ElementRef<typeof OTPInput>,
-  React.ComponentPropsWithoutRef<typeof OTPInput>
+  InputOTPProps
 >(({ className, containerClassName, ...props }, ref) => (
   <OTPInput
     ref={ref}
@@ -33,53 +36,56 @@ InputOTP.displayName = "InputOTP";
  * Component: InputOTPGroup
  * -------------------------------------------------------------------------- */
 
-const InputOTPGroup = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("flex items-center", className)} {...props} />
-));
+type InputOTPGroupProps = React.HTMLAttributes<HTMLDivElement>;
+const InputOTPGroup = React.forwardRef<HTMLDivElement, InputOTPGroupProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center", className)} {...props} />
+  ),
+);
 InputOTPGroup.displayName = "InputOTPGroup";
 
 /* -----------------------------------------------------------------------------
  * Component: InputOTPSlot
  * -------------------------------------------------------------------------- */
 
-const InputOTPSlot = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & { index: number }
->(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext);
-  const slot = inputOTPContext.slots[index];
+interface InputOTPSlotProps extends React.HTMLAttributes<HTMLDivElement> {
+  index: number;
+}
+const InputOTPSlot = React.forwardRef<HTMLDivElement, InputOTPSlotProps>(
+  ({ index, className, ...props }, ref) => {
+    const inputOTPContext = React.useContext(OTPInputContext);
+    const slot = inputOTPContext.slots[index];
 
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "border-input relative flex size-10 items-center justify-center border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        slot?.isActive && "ring-ring z-10 ring-2",
-        className,
-      )}
-      {...props}
-    >
-      {slot?.char}
-      {slot?.hasFakeCaret ? (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
-        </div>
-      ) : null}
-    </div>
-  );
-});
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "border-input relative flex size-10 items-center justify-center border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+          slot?.isActive && "ring-ring z-10 ring-2",
+          className,
+        )}
+        {...props}
+      >
+        {slot?.char}
+        {slot?.hasFakeCaret ? (
+          <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+            <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);
 InputOTPSlot.displayName = "InputOTPSlot";
 
 /* -----------------------------------------------------------------------------
  * Component: InputOTPSeparator
  * -------------------------------------------------------------------------- */
 
+type InputOTPSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
 const InputOTPSeparator = React.forwardRef<
   HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+  InputOTPSeparatorProps
 >(({ ...props }, ref) => (
   <div ref={ref} role="separator" {...props}>
     <DotFilledIcon />
@@ -96,5 +102,11 @@ export {
   InputOTPGroup,
   InputOTPSlot,
   InputOTPSeparator,
+  type InputOTPProps,
+  type InputOTPGroupProps,
+  type InputOTPSlotProps,
+  type InputOTPSeparatorProps,
   REGEXP_ONLY_DIGITS_AND_CHARS,
+  REGEXP_ONLY_CHARS,
+  REGEXP_ONLY_DIGITS,
 };

package/src/input.tsx

@@ -21,28 +21,30 @@ const inputVariants = cva({
   },
 });
 
+type InputVariantsProps = VariantProps<typeof inputVariants>;
+
 /* -----------------------------------------------------------------------------
  * Component: Input
  * -------------------------------------------------------------------------- */
 
-const Input = React.forwardRef<
-  HTMLInputElement,
-  Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> &
-    VariantProps<typeof inputVariants>
->(({ className, inputSize, ...props }, ref) => {
-  return (
-    <input
-      type="text"
-      className={inputVariants({ className, inputSize })}
-      ref={ref}
-      {...props}
-    />
-  );
-});
+type InputProps = React.InputHTMLAttributes<HTMLInputElement> &
+  InputVariantsProps;
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, inputSize, ...props }, ref) => {
+    return (
+      <input
+        type="text"
+        className={inputVariants({ className, inputSize })}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
 Input.displayName = "Input";
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Input };
+export { Input, type InputProps };

package/src/kbd.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Kbd
+ * -------------------------------------------------------------------------- */
+
+interface KbdProps extends React.HTMLAttributes<HTMLElement> {
+  asChild?: boolean;
+}
+const Kbd = React.forwardRef<HTMLElement, KbdProps>(
+  ({ asChild, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : "kbd";
+
+    return (
+      <Comp
+        ref={ref}
+        className={cn(
+          "bg-muted text-muted-foreground inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-xs font-medium",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+Kbd.displayName = "Kbd";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Kbd, type KbdProps };

package/src/label.tsx

@@ -7,9 +7,10 @@ import { cn } from "./utils";
  * Component: Label
  * -------------------------------------------------------------------------- */
 
+type LabelProps = LabelPrimitive.LabelProps;
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  LabelPrimitive.LabelProps
+  LabelProps
 >(({ className, ...props }, ref) => (
   <LabelPrimitive.Root
     ref={ref}
@@ -26,4 +27,4 @@ Label.displayName = LabelPrimitive.Root.displayName;
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Label };
+export { Label, type LabelProps };

package/src/menubar.tsx

@@ -13,33 +13,38 @@ import { cn } from "./utils";
  * Component: MenubarMenu
  * -------------------------------------------------------------------------- */
 
+type MenubarMenuProps = MenubarPrimitive.MenubarMenuProps;
 const MenubarMenu = MenubarPrimitive.Menu;
 
 /* -----------------------------------------------------------------------------
  * Component: MenubarGroup
  * -------------------------------------------------------------------------- */
 
+type MenubarGroupProps = MenubarPrimitive.MenubarGroupProps;
 const MenubarGroup = MenubarPrimitive.Group;
 
 /* -----------------------------------------------------------------------------
  * Component: MenubarSub
  * -------------------------------------------------------------------------- */
 
+type MenubarSubProps = MenubarPrimitive.MenubarSubProps;
 const MenubarSub = MenubarPrimitive.Sub;
 
 /* -----------------------------------------------------------------------------
  * Component: MenubarRadioGroup
  * -------------------------------------------------------------------------- */
 
+type MenubarRadioGroupProps = MenubarPrimitive.MenubarRadioGroupProps;
 const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
 
 /* -----------------------------------------------------------------------------
  * Component: Menubar
  * -------------------------------------------------------------------------- */
 
+type MenubarProps = MenubarPrimitive.MenubarProps;
 const Menubar = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Root>,
-  MenubarPrimitive.MenubarProps
+  MenubarProps
 >(({ className, ...props }, ref) => (
   <MenubarPrimitive.Root
     ref={ref}
@@ -56,9 +61,10 @@ Menubar.displayName = MenubarPrimitive.Root.displayName;
  * Component: MenubarTrigger
  * -------------------------------------------------------------------------- */
 
+type MenubarTriggerProps = MenubarPrimitive.MenubarTriggerProps;
 const MenubarTrigger = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Trigger>,
-  MenubarPrimitive.MenubarTriggerProps
+  MenubarTriggerProps
 >(({ className, ...props }, ref) => (
   <MenubarPrimitive.Trigger
     ref={ref}
@@ -75,11 +81,13 @@ MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
  * Component: MenubarSubTrigger
  * -------------------------------------------------------------------------- */
 
+interface MenubarSubTriggerProps
+  extends MenubarPrimitive.MenubarSubTriggerProps {
+  inset?: boolean;
+}
 const MenubarSubTrigger = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
-  MenubarPrimitive.MenubarSubTriggerProps & {
-    inset?: boolean;
-  }
+  MenubarSubTriggerProps
 >(({ className, inset, children, ...props }, ref) => (
   <MenubarPrimitive.SubTrigger
     ref={ref}
@@ -100,9 +108,10 @@ MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
  * Component: MenubarSubContent
  * -------------------------------------------------------------------------- */
 
+type MenubarSubContentProps = MenubarPrimitive.MenubarSubContentProps;
 const MenubarSubContent = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.SubContent>,
-  MenubarPrimitive.MenubarSubContentProps
+  MenubarSubContentProps
 >(({ className, ...props }, ref) => (
   <MenubarPrimitive.Portal>
     <MenubarPrimitive.SubContent
@@ -121,9 +130,10 @@ MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
  * Component: MenubarContent
  * -------------------------------------------------------------------------- */
 
+type MenubarContentProps = MenubarPrimitive.MenubarContentProps;
 const MenubarContent = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Content>,
-  MenubarPrimitive.MenubarContentProps
+  MenubarContentProps
 >(
   (
     { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
@@ -150,11 +160,12 @@ MenubarContent.displayName = MenubarPrimitive.Content.displayName;
  * Component: MenubarItem
  * -------------------------------------------------------------------------- */
 
+interface MenubarItemProps extends MenubarPrimitive.MenubarItemProps {
+  inset?: boolean;
+}
 const MenubarItem = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Item>,
-  MenubarPrimitive.MenubarItemProps & {
-    inset?: boolean;
-  }
+  MenubarItemProps
 >(({ className, inset, ...props }, ref) => (
   <MenubarPrimitive.Item
     ref={ref}
@@ -172,9 +183,10 @@ MenubarItem.displayName = MenubarPrimitive.Item.displayName;
  * Component: MenubarCheckboxItem
  * -------------------------------------------------------------------------- */
 
+type MenubarCheckboxItemProps = MenubarPrimitive.MenubarCheckboxItemProps;
 const MenubarCheckboxItem = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
-  MenubarPrimitive.MenubarCheckboxItemProps
+  MenubarCheckboxItemProps
 >(({ className, children, checked, ...props }, ref) => (
   <MenubarPrimitive.CheckboxItem
     ref={ref}
@@ -199,9 +211,10 @@ MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
  * Component: MenubarRadioItem
  * -------------------------------------------------------------------------- */
 
+type MenubarRadioItemProps = MenubarPrimitive.MenubarRadioItemProps;
 const MenubarRadioItem = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.RadioItem>,
-  MenubarPrimitive.MenubarRadioItemProps
+  MenubarRadioItemProps
 >(({ className, children, ...props }, ref) => (
   <MenubarPrimitive.RadioItem
     ref={ref}
@@ -225,11 +238,12 @@ MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
  * Component: MenubarLabel
  * -------------------------------------------------------------------------- */
 
+interface MenubarLabelProps extends MenubarPrimitive.MenubarLabelProps {
+  inset?: boolean;
+}
 const MenubarLabel = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Label>,
-  MenubarPrimitive.MenubarLabelProps & {
-    inset?: boolean;
-  }
+  MenubarLabelProps
 >(({ className, inset, ...props }, ref) => (
   <MenubarPrimitive.Label
     ref={ref}
@@ -247,9 +261,10 @@ MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
  * Component: MenubarSeparator
  * -------------------------------------------------------------------------- */
 
+type MenubarSeparatorProps = MenubarPrimitive.MenubarSeparatorProps;
 const MenubarSeparator = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+  MenubarSeparatorProps
 >(({ className, ...props }, ref) => (
   <MenubarPrimitive.Separator
     ref={ref}
@@ -263,10 +278,11 @@ MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
  * Component: MenubarShortcut
  * -------------------------------------------------------------------------- */
 
+type MenubarShortcutProps = React.HTMLAttributes<HTMLSpanElement>;
 function MenubarShortcut({
   className,
   ...props
-}: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element {
+}: MenubarShortcutProps): React.JSX.Element {
   return (
     <span
       className={cn(
@@ -298,4 +314,19 @@ export {
   MenubarGroup,
   MenubarSub,
   MenubarShortcut,
+  type MenubarProps,
+  type MenubarMenuProps,
+  type MenubarTriggerProps,
+  type MenubarContentProps,
+  type MenubarItemProps,
+  type MenubarSeparatorProps,
+  type MenubarLabelProps,
+  type MenubarCheckboxItemProps,
+  type MenubarRadioGroupProps,
+  type MenubarRadioItemProps,
+  type MenubarSubContentProps,
+  type MenubarSubTriggerProps,
+  type MenubarGroupProps,
+  type MenubarSubProps,
+  type MenubarShortcutProps,
 };

package/src/navigation-menu.tsx

@@ -17,9 +17,10 @@ const navigationMenuTriggerStyle = cva({
  * Component: NavigationMenu
  * -------------------------------------------------------------------------- */
 
+type NavigationMenuProps = NavigationMenuPrimitive.NavigationMenuProps;
 const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-  NavigationMenuPrimitive.NavigationMenuProps
+  NavigationMenuProps
 >(({ className, children, ...props }, ref) => (
   <NavigationMenuPrimitive.Root
     ref={ref}
@@ -39,9 +40,10 @@ NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
  * Component: NavigationMenuList
  * -------------------------------------------------------------------------- */
 
+type NavigationMenuListProps = NavigationMenuPrimitive.NavigationMenuListProps;
 const NavigationMenuList = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.List>,
-  NavigationMenuPrimitive.NavigationMenuListProps
+  NavigationMenuListProps
 >(({ className, ...props }, ref) => (
   <NavigationMenuPrimitive.List
     ref={ref}
@@ -58,12 +60,15 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
  * Component: NavigationMenuItem
  * -------------------------------------------------------------------------- */
 
+type NavigationMenuItemProps = NavigationMenuPrimitive.NavigationMenuItemProps;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 /* -----------------------------------------------------------------------------
  * Component: NavigationMenuContent
  * -------------------------------------------------------------------------- */
 
+type NavigationMenuTriggerProps =
+  NavigationMenuPrimitive.NavigationMenuTriggerProps;
 const NavigationMenuTrigger = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
   NavigationMenuPrimitive.NavigationMenuTriggerProps
@@ -90,9 +95,11 @@ NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
  * Component: NavigationMenuContent
  * -------------------------------------------------------------------------- */
 
+type NavigationMenuContentProps =
+  NavigationMenuPrimitive.NavigationMenuContentProps;
 const NavigationMenuContent = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  NavigationMenuPrimitive.NavigationMenuContentProps
+  NavigationMenuContentProps
 >(({ className, ...props }, ref) => (
   <NavigationMenuPrimitive.Content
     ref={ref}
@@ -109,15 +116,18 @@ NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
  * Component: NavigationMenuLink
  * -------------------------------------------------------------------------- */
 
+type NavigationMenuLinkProps = NavigationMenuPrimitive.NavigationMenuLinkProps;
 const NavigationMenuLink = NavigationMenuPrimitive.Link;
 
 /* -----------------------------------------------------------------------------
  * Component: NavigationMenuViewport
  * -------------------------------------------------------------------------- */
 
+type NavigationMenuViewportProps =
+  NavigationMenuPrimitive.NavigationMenuViewportProps;
 const NavigationMenuViewport = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-  NavigationMenuPrimitive.NavigationMenuViewportProps
+  NavigationMenuViewportProps
 >(({ className, ...props }, ref) => (
   <div
     className={cn(
@@ -141,9 +151,11 @@ NavigationMenuViewport.displayName =
  * Component: NavigationMenuIndicator
  * -------------------------------------------------------------------------- */
 
+type NavigationMenuIndicatorProps =
+  NavigationMenuPrimitive.NavigationMenuIndicatorProps;
 const NavigationMenuIndicator = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-  NavigationMenuPrimitive.NavigationMenuIndicatorProps
+  NavigationMenuIndicatorProps
 >(({ className, ...props }, ref) => (
   <NavigationMenuPrimitive.Indicator
     ref={ref}
@@ -173,4 +185,12 @@ export {
   NavigationMenuLink,
   NavigationMenuIndicator,
   NavigationMenuViewport,
+  type NavigationMenuProps,
+  type NavigationMenuListProps,
+  type NavigationMenuItemProps,
+  type NavigationMenuContentProps,
+  type NavigationMenuTriggerProps,
+  type NavigationMenuLinkProps,
+  type NavigationMenuIndicatorProps,
+  type NavigationMenuViewportProps,
 };

package/src/pagination.tsx

@@ -11,10 +11,11 @@ import { type ButtonProps, buttonVariants } from "./button";
  * Component: Pagination
  * -------------------------------------------------------------------------- */
 
+type PaginationProps = React.HTMLAttributes<HTMLElement>;
 function Pagination({
   className,
   ...props
-}: React.ComponentProps<"nav">): React.JSX.Element {
+}: PaginationProps): React.JSX.Element {
   return (
     <nav
       role="navigation"
@@ -29,9 +30,10 @@ function Pagination({
  * Component: PaginationContent
  * -------------------------------------------------------------------------- */
 
+type PaginationContentProps = React.HTMLAttributes<HTMLUListElement>;
 const PaginationContent = React.forwardRef<
   HTMLUListElement,
-  React.HTMLAttributes<HTMLUListElement>
+  PaginationContentProps
 >(({ className, ...props }, ref) => (
   <ul
     ref={ref}
@@ -45,10 +47,10 @@ PaginationContent.displayName = "PaginationContent";
  * Component: PaginationItem
  * -------------------------------------------------------------------------- */
 
-const PaginationItem = React.forwardRef<
-  HTMLLIElement,
-  React.LiHTMLAttributes<HTMLLIElement>
->((props, ref) => <li ref={ref} {...props} />);
+type PaginationItemProps = React.LiHTMLAttributes<HTMLLIElement>;
+const PaginationItem = React.forwardRef<HTMLLIElement, PaginationItemProps>(
+  (props, ref) => <li ref={ref} {...props} />,
+);
 PaginationItem.displayName = "PaginationItem";
 
 /* -----------------------------------------------------------------------------
@@ -87,10 +89,11 @@ function PaginationLink({
  * Component: PaginationPrevious
  * -------------------------------------------------------------------------- */
 
+type PaginationPreviousProps = PaginationLinkProps;
 function PaginationPrevious({
   className,
   ...props
-}: PaginationLinkProps): React.JSX.Element {
+}: PaginationPreviousProps): React.JSX.Element {
   return (
     <PaginationLink
       aria-label="Go to previous page"
@@ -108,10 +111,11 @@ function PaginationPrevious({
  * Component: PaginationNext
  * -------------------------------------------------------------------------- */
 
+type PaginationNextProps = PaginationLinkProps;
 function PaginationNext({
   className,
   ...props
-}: PaginationLinkProps): React.JSX.Element {
+}: PaginationNextProps): React.JSX.Element {
   return (
     <PaginationLink
       aria-label="Go to next page"
@@ -129,10 +133,11 @@ function PaginationNext({
  * Component: PaginationEllipsis
  * -------------------------------------------------------------------------- */
 
+type PaginationEllipsisProps = React.HTMLAttributes<HTMLSpanElement>;
 function PaginationEllipsis({
   className,
   ...props
-}: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element {
+}: PaginationEllipsisProps): React.JSX.Element {
   return (
     <span
       aria-hidden
@@ -157,4 +162,11 @@ export {
   PaginationPrevious,
   PaginationNext,
   PaginationEllipsis,
+  type PaginationProps,
+  type PaginationContentProps,
+  type PaginationLinkProps,
+  type PaginationItemProps,
+  type PaginationPreviousProps,
+  type PaginationNextProps,
+  type PaginationEllipsisProps,
 };