fix: props

Author: alexcambose

packages/component-library/src/SearchButton/index.module.scss

@@ -14,4 +14,4 @@
       display: none;
     }
   }
-}
+}

packages/component-library/src/SearchButton/index.stories.tsx

@@ -4,7 +4,6 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { SearchButton as SearchButtonComponent } from "./index.jsx";
 import { SIZES } from "../Button/index.jsx";
 
-
 const iconControl = {
   control: "select",
   options: Object.keys(icons),
@@ -19,7 +18,7 @@ const iconControl = {
 const meta = {
   component: SearchButtonComponent,
   argTypes: {
-     size: {
+    size: {
       control: "inline-radio",
       options: SIZES,
       table: {
@@ -32,7 +31,6 @@ const meta = {
         category: "Contents",
       },
     },
-   
   },
 } satisfies Meta<typeof SearchButtonComponent>;
 export default meta;

packages/component-library/src/SearchButton/index.tsx

@@ -1,23 +1,25 @@
 "use client";
 
-import { MagnifyingGlass } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass';
-import type { ComponentProps, ReactNode } from "react";
+import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr/MagnifyingGlass";
+import clsx from "clsx";
+import type { ReactNode } from "react";
+import { Button as BaseButton } from "react-aria-components";
 
+import type { Props as ButtonProps } from "../Button";
 import { Button } from "../Button";
 import styles from "./index.module.scss";
 
-
 type OwnProps = {
   largeScreenContent?: ReactNode;
   smallScreenContent?: ReactNode;
 };
 
-type Props =  Pick<
-  ComponentProps<typeof Button>,
-  'beforeIcon' | 'size' | 'onClick'
+type Props = Pick<
+  ButtonProps<typeof BaseButton>,
+  "beforeIcon" | "size" | "onClick" | "className" | "isPending"
 > &
   OwnProps;
-  
+
 export const SearchButton = ({
   beforeIcon,
   largeScreenContent,
@@ -26,28 +28,27 @@ export const SearchButton = ({
 }: Props) => {
   return (
     <div className={styles.searchButton}>
-    <Button
-      className={styles.largeScreenSearchButton ?? ""}
-      variant="outline"
-      beforeIcon={beforeIcon ?? <MagnifyingGlass />}
-      size="sm"
-      rounded
-      
-      {...props}
-    >
-      {largeScreenContent}
-    </Button>
-    <Button
-      className={styles.smallScreenSearchButton ?? ""}
-      hideText
-      variant="ghost"
-      beforeIcon={beforeIcon ?? <MagnifyingGlass />}
-      size="sm"
-      rounded
-      {...props}
-    >
-      {smallScreenContent}
-    </Button>
-  </div>
+      <Button
+        className={clsx(styles.largeScreenSearchButton, props.className)}
+        variant="outline"
+        beforeIcon={beforeIcon ?? <MagnifyingGlass />}
+        size="sm"
+        rounded
+        {...props}
+      >
+        {largeScreenContent}
+      </Button>
+      <Button
+        className={clsx(styles.smallScreenSearchButton, props.className)}
+        hideText
+        variant="ghost"
+        beforeIcon={beforeIcon ?? <MagnifyingGlass />}
+        size="sm"
+        rounded
+        {...props}
+      >
+        {smallScreenContent}
+      </Button>
+    </div>
   );
 };