chore: address-feedback

Author: tractorss

src/lib/pagination/compact.tsx

@@ -6,21 +6,26 @@ import { cn } from "../../utils";
 import { Button, type ButtonProps } from "react-aria-components";
 import clsx from "clsx";
 
-const ArrowButton: React.FC<ButtonProps> = ({ className, ...props }) => {
+const ArrowButton: React.FC<ButtonProps> = ({
+  children,
+  isDisabled,
+  className,
+  ...props
+}) => {
   return (
     <Button
       className={cn(
-        "h-6 w-6 rounded-full bg-none hover:enabled:cursor-pointer hover:disabled:cursor-default",
-        "[&>svg]:ease-ease [&>svg]:h-6 [&>svg]:w-6 [&>svg]:transition-[fill]",
+        "size-6 rounded-full bg-none hover:enabled:cursor-pointer hover:disabled:cursor-default",
+        "[&>svg]:ease-ease [&>svg]:size-6 [&>svg]:transition-[fill]",
         ":hover:enabled:[&>svg]:fill-klerosUIComponentsSecondaryBlue",
-        props.isDisabled
+        isDisabled
           ? ["[&>svg]:fill-klerosUIComponentsStroke"]
           : ["[&>svg]:fill-klerosUIComponentsPrimaryBlue"],
         className,
       )}
       {...props}
     >
-      {props.children}
+      {children}
     </Button>
   );
 };

src/lib/pagination/standard.tsx

@@ -14,7 +14,7 @@ const PageButton: React.FC<ButtonProps & { selected?: boolean }> = ({
   <Button
     {...props}
     className={cn(
-      "rounded-base m-1 h-8 w-8 border",
+      "rounded-base m-1 size-8 border",
       "flex items-center justify-center text-sm",
       "hover:cursor-pointer hover:disabled:cursor-default",
       selected

src/lib/pagination/tabs.tsx

@@ -26,12 +26,12 @@ interface TabsItem {
   /** Content to display when this tab is selected. */
   content: ReactNode;
   /** Props for Tab
-   * {@link https://react-spectrum.adobe.com/react-aria/Tabs.html#tab | TabProps}
+   * [See TabProps](https://react-spectrum.adobe.com/react-aria/Tabs.html#tab)
    */
   tabProps?: TabProps;
   /**
    * Can be used to provide separate styling for a TabPanel, apart from one passed in panelClassName parent props.
-   * {@link https://react-spectrum.adobe.com/react-aria/Tabs.html#tabpanel | TabListProps}
+   * [See TabPanelProps](https://react-spectrum.adobe.com/react-aria/Tabs.html#tabpanel)
    */
   tabPanelProps?: TabPanelProps;
 }
@@ -45,11 +45,12 @@ interface TabsProps extends Omit<AriaTabsProps, "orientation"> {
   panelClassName?: string;
   /**
    * Can be used to override default style.
-   * {@link https://react-spectrum.adobe.com/react-aria/Tabs.html#tablist | TabListProps}
+   * [See TablistProps](https://react-spectrum.adobe.com/react-aria/Tabs.html#tablist)
    */
   tabListProps?: TabListProps<TabProps>;
 }
 
+/** Tabs organize content into multiple sections and allow users to navigate between them. */
 function Tabs({
   items,
   className,
@@ -104,7 +105,7 @@ function Tabs({
               (Icon && (
                 <Icon
                   className={cn(
-                    "hover-short-transition h-4 w-4",
+                    "hover-short-transition size-4",
                     "fill-klerosUIComponentsPrimaryText mr-4",
                     id === selectedKey && "fill-klerosUIComponentsPrimaryBlue",
                     disabled && "fill-klerosUIComponentsStroke",