@codefast/ui 0.0.8 → 0.0.9

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,
 };

package/src/popover.tsx

@@ -8,24 +8,28 @@ import { cn } from "./utils";
  * Component: Popover
  * -------------------------------------------------------------------------- */
 
+type PopoverProps = PopoverPrimitive.PopoverProps;
 const Popover = PopoverPrimitive.Root;
 
 /* -----------------------------------------------------------------------------
  * Component: PopoverTrigger
  * -------------------------------------------------------------------------- */
 
+type PopoverTriggerProps = PopoverPrimitive.PopoverTriggerProps;
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
  * Component: PopoverAnchor
  * -------------------------------------------------------------------------- */
 
+type PopoverAnchorProps = PopoverPrimitive.PopoverAnchorProps;
 const PopoverAnchor = PopoverPrimitive.Anchor;
 
 /* -----------------------------------------------------------------------------
  * Component: PopoverContent
  * -------------------------------------------------------------------------- */
 
+type PopoverContentProps = PopoverPrimitive.PopoverContentProps;
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   PopoverPrimitive.PopoverContentProps
@@ -49,9 +53,10 @@ PopoverContent.displayName = PopoverPrimitive.Content.displayName;
  * Component: PopoverArrow
  * -------------------------------------------------------------------------- */
 
+type PopoverArrowProps = PopoverPrimitive.PopoverArrowProps;
 const PopoverArrow = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Arrow>,
-  PopoverPrimitive.PopoverArrowProps
+  PopoverArrowProps
 >(({ className, ...props }, ref) => (
   <PopoverPrimitive.Arrow
     ref={ref}
@@ -65,4 +70,15 @@ PopoverArrow.displayName = PopoverPrimitive.Arrow.displayName;
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverArrow };
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverArrow,
+  type PopoverProps,
+  type PopoverTriggerProps,
+  type PopoverContentProps,
+  type PopoverAnchorProps,
+  type PopoverArrowProps,
+};

package/src/pre.tsx

@@ -5,18 +5,20 @@ import { Slot } from "@radix-ui/react-slot";
  * Component: Pre
  * -------------------------------------------------------------------------- */
 
-const Pre = React.forwardRef<
-  HTMLPreElement,
-  React.HTMLAttributes<HTMLPreElement> & { asChild?: boolean }
->(({ asChild, ...props }, ref) => {
-  const Comp = asChild ? Slot : "pre";
+interface PreProps extends React.HTMLAttributes<HTMLPreElement> {
+  asChild?: boolean;
+}
+const Pre = React.forwardRef<HTMLPreElement, PreProps>(
+  ({ asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "pre";
 
-  return <Comp ref={ref} {...props} />;
-});
+    return <Comp ref={ref} {...props} />;
+  },
+);
 Pre.displayName = "Pre";
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Pre };
+export { Pre, type PreProps };

package/src/progress.tsx

@@ -8,9 +8,10 @@ import { cn } from "./utils";
  * Component: Progress
  * -------------------------------------------------------------------------- */
 
+type ProgressProps = ProgressPrimitive.ProgressProps;
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
-  ProgressPrimitive.ProgressProps
+  ProgressProps
 >(({ className, value, ...props }, ref) => (
   <ProgressPrimitive.Root
     ref={ref}
@@ -23,7 +24,7 @@ const Progress = React.forwardRef<
     <ProgressPrimitive.Indicator
       className="bg-primary h-full w-full flex-1 transition-all"
       style={{
-        transform: `translateX(-${100 - (value ?? 0)}%)`,
+        transform: `translateX(-${String(100 - (value ?? 0))}%)`,
       }}
     />
   </ProgressPrimitive.Root>
@@ -34,4 +35,4 @@ Progress.displayName = ProgressPrimitive.Root.displayName;
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Progress };
+export { Progress, type ProgressProps };

package/src/quote.tsx

@@ -5,18 +5,20 @@ import { Slot } from "@radix-ui/react-slot";
  * Component: Quote
  * -------------------------------------------------------------------------- */
 
-const Quote = React.forwardRef<
-  HTMLQuoteElement,
-  React.QuoteHTMLAttributes<HTMLQuoteElement> & { asChild?: boolean }
->(({ asChild, ...props }, ref) => {
-  const Comp = asChild ? Slot : "q";
+interface QuoteProps extends React.QuoteHTMLAttributes<HTMLQuoteElement> {
+  asChild?: boolean;
+}
+const Quote = React.forwardRef<HTMLQuoteElement, QuoteProps>(
+  ({ asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "q";
 
-  return <Comp ref={ref} {...props} />;
-});
+    return <Comp ref={ref} {...props} />;
+  },
+);
 Quote.displayName = "Quote";
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Quote };
+export { Quote, type QuoteProps };

package/src/radio-group.tsx

@@ -8,9 +8,10 @@ import { cn } from "./utils";
  * Component: RadioGroup
  * -------------------------------------------------------------------------- */
 
+type RadioGroupProps = RadioGroupPrimitive.RadioGroupProps;
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  RadioGroupPrimitive.RadioGroupProps
+  RadioGroupProps
 >(({ className, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Root
@@ -26,9 +27,10 @@ RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
  * Component: RadioGroupItem
  * -------------------------------------------------------------------------- */
 
+type RadioGroupItemProps = RadioGroupPrimitive.RadioGroupItemProps;
 const RadioGroupItem = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  RadioGroupPrimitive.RadioGroupItemProps
+  RadioGroupItemProps
 >(({ className, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Item
@@ -53,4 +55,9 @@ RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { RadioGroup, RadioGroupItem };
+export {
+  RadioGroup,
+  RadioGroupItem,
+  type RadioGroupProps,
+  type RadioGroupItemProps,
+};

package/src/resizable.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { DragHandleDots2Icon } from "@radix-ui/react-icons";
+import * as React from "react";
 import * as ResizablePrimitive from "react-resizable-panels";
+import { DragHandleDots2Icon } from "@radix-ui/react-icons";
 import { cn } from "./utils";
 
 /* -----------------------------------------------------------------------------

package/src/scroll-area.tsx

@@ -8,9 +8,10 @@ import { cn } from "./utils";
  * Component: ScrollArea
  * -------------------------------------------------------------------------- */
 
+type ScrollAreaProps = ScrollAreaPrimitive.ScrollAreaProps;
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  ScrollAreaPrimitive.ScrollAreaProps
+  ScrollAreaProps
 >(({ className, children, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
@@ -20,22 +21,23 @@ const ScrollArea = React.forwardRef<
     <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit]">
       {children}
     </ScrollAreaPrimitive.Viewport>
-    <ScrollBar orientation="vertical" />
-    <ScrollBar orientation="horizontal" />
+    <ScrollAreaScrollbar orientation="vertical" />
+    <ScrollAreaScrollbar orientation="horizontal" />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
 /* -----------------------------------------------------------------------------
- * Component: ScrollBar
+ * Component: ScrollAreaScrollbar
  * -------------------------------------------------------------------------- */
 
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  ScrollAreaPrimitive.ScrollAreaScrollbarProps
+type ScrollAreaScrollbarProps = ScrollAreaPrimitive.ScrollAreaScrollbarProps;
+const ScrollAreaScrollbar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Scrollbar>,
+  ScrollAreaScrollbarProps
 >(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
+  <ScrollAreaPrimitive.Scrollbar
     ref={ref}
     orientation={orientation}
     className={cn(
@@ -49,12 +51,17 @@ const ScrollBar = React.forwardRef<
     {...props}
   >
     <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  </ScrollAreaPrimitive.Scrollbar>
 ));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+ScrollAreaScrollbar.displayName = ScrollAreaPrimitive.Scrollbar.displayName;
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { ScrollArea, ScrollBar };
+export {
+  ScrollArea,
+  ScrollAreaScrollbar,
+  type ScrollAreaProps,
+  type ScrollAreaScrollbarProps,
+};

package/src/section.tsx

@@ -5,20 +5,20 @@ import { Slot } from "@radix-ui/react-slot";
  * Component: Section
  * -------------------------------------------------------------------------- */
 
-const Section = React.forwardRef<
-  HTMLElement,
-  React.HTMLAttributes<HTMLElement> & {
-    asChild?: boolean;
-  }
->(({ asChild, ...props }, ref) => {
-  const Comp = asChild ? Slot : "section";
+interface SectionProps extends React.HTMLAttributes<HTMLElement> {
+  asChild?: boolean;
+}
+const Section = React.forwardRef<HTMLElement, SectionProps>(
+  ({ asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "section";
 
-  return <Comp ref={ref} {...props} />;
-});
+    return <Comp ref={ref} {...props} />;
+  },
+);
 Section.displayName = "Section";
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Section };
+export { Section, type SectionProps };