Add button type prop

site/docs/pages/swap/types.mdx

@@ -180,16 +180,6 @@ type SwapReact = {
 };
 ```
 
-## `SwapSettingsReact`
-
-```ts
-type SwapSettingsReact = {
-  className?: string; // Optional className override for top div element.
-  icon?: ReactNode; // Optional icon override
-  text?: string; // Optional text override
-};
-```
-
 ## `SwapToggleButtonReact`
 
 ```ts

src/swap/components/Swap.tsx

@@ -7,7 +7,6 @@ import { SwapAmountInput } from './SwapAmountInput';
 import { SwapButton } from './SwapButton';
 import { SwapMessage } from './SwapMessage';
 import { SwapProvider } from './SwapProvider';
-import { SwapSettings } from './SwapSettings';
 import { SwapToggleButton } from './SwapToggleButton';
 
 export function Swap({
@@ -19,17 +18,15 @@ export function Swap({
   onSuccess,
   title = 'Swap',
 }: SwapReact) {
-  const { inputs, toggleButton, swapButton, swapMessage, swapSettings } =
-    useMemo(() => {
-      const childrenArray = Children.toArray(children);
-      return {
-        inputs: childrenArray.filter(findComponent(SwapAmountInput)),
-        toggleButton: childrenArray.find(findComponent(SwapToggleButton)),
-        swapButton: childrenArray.find(findComponent(SwapButton)),
-        swapMessage: childrenArray.find(findComponent(SwapMessage)),
-        swapSettings: childrenArray.find(findComponent(SwapSettings)),
-      };
-    }, [children]);
+  const { inputs, toggleButton, swapButton, swapMessage } = useMemo(() => {
+    const childrenArray = Children.toArray(children);
+    return {
+      inputs: childrenArray.filter(findComponent(SwapAmountInput)),
+      toggleButton: childrenArray.find(findComponent(SwapToggleButton)),
+      swapButton: childrenArray.find(findComponent(SwapButton)),
+      swapMessage: childrenArray.find(findComponent(SwapMessage)),
+    };
+  }, [children]);
 
   const isMounted = useIsMounted();
 
@@ -53,14 +50,10 @@ export function Swap({
         )}
         data-testid="ockSwap_Container"
       >
-        <div className="mb-4 flex items-center justify-between">
-          <h3
-            className={cn(text.title3, 'text-inherit')}
-            data-testid="ockSwap_Title"
-          >
+        <div className="mb-4">
+          <h3 className={text.title3} data-testid="ockSwap_Title">
             {title}
           </h3>
-          <div>{swapSettings}</div>
         </div>
         {inputs[0]}
         <div className="relative h-1">{toggleButton}</div>

src/swap/components/SwapSettingsSlippageLayout.test.tsx

@@ -0,0 +1,100 @@
+import { render, screen } from '@testing-library/react';
+import type React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { SwapSettingsSlippageDescription } from './SwapSettingsSlippageDescription';
+import { SwapSettingsSlippageInput } from './SwapSettingsSlippageInput';
+import { SwapSettingsSlippageLayout } from './SwapSettingsSlippageLayout';
+import { SwapSettingsSlippageTitle } from './SwapSettingsSlippageTitle';
+
+vi.mock('./SwapSettingsSlippageTitle', () => ({
+  SwapSettingsSlippageTitle: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="mock-title">{children}</div>
+  ),
+}));
+
+vi.mock('./SwapSettingsSlippageDescription', () => ({
+  SwapSettingsSlippageDescription: ({
+    children,
+  }: { children: React.ReactNode }) => (
+    <div data-testid="mock-description">{children}</div>
+  ),
+}));
+
+vi.mock('./SwapSettingsSlippageInput', () => ({
+  SwapSettingsSlippageInput: () => <div data-testid="mock-input">Input</div>,
+}));
+
+vi.mock('../../styles/theme', () => ({
+  cn: (...args: string[]) => args.join(' '),
+}));
+
+describe('SwapSettingsSlippageLayout', () => {
+  it('renders with all child components', () => {
+    render(
+      <SwapSettingsSlippageLayout>
+        <SwapSettingsSlippageTitle>Title</SwapSettingsSlippageTitle>
+        <SwapSettingsSlippageDescription>
+          Description
+        </SwapSettingsSlippageDescription>
+        <SwapSettingsSlippageInput />
+      </SwapSettingsSlippageLayout>,
+    );
+    expect(
+      screen.getByTestId('ockSwapSettingsLayout_container'),
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('mock-title')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-description')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-input')).toBeInTheDocument();
+  });
+
+  it('renders with only some child components', () => {
+    render(
+      <SwapSettingsSlippageLayout>
+        <SwapSettingsSlippageTitle>Title</SwapSettingsSlippageTitle>
+      </SwapSettingsSlippageLayout>,
+    );
+    expect(
+      screen.getByTestId('ockSwapSettingsLayout_container'),
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('mock-title')).toBeInTheDocument();
+    expect(screen.queryByTestId('mock-description')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('mock-input')).not.toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    render(
+      <SwapSettingsSlippageLayout className="custom-class">
+        <SwapSettingsSlippageTitle>Title</SwapSettingsSlippageTitle>
+      </SwapSettingsSlippageLayout>,
+    );
+    const container = screen.getByTestId('ockSwapSettingsLayout_container');
+    expect(container.className).toContain('custom-class');
+  });
+
+  it('renders without any child components', () => {
+    render(<SwapSettingsSlippageLayout />);
+    expect(
+      screen.getByTestId('ockSwapSettingsLayout_container'),
+    ).toBeInTheDocument();
+    expect(screen.queryByTestId('mock-title')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('mock-description')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('mock-toggle')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('mock-input')).not.toBeInTheDocument();
+  });
+
+  it('renders with correct layout structure', () => {
+    render(
+      <SwapSettingsSlippageLayout>
+        <SwapSettingsSlippageTitle>Title</SwapSettingsSlippageTitle>
+        <SwapSettingsSlippageDescription>
+          Description
+        </SwapSettingsSlippageDescription>
+        <SwapSettingsSlippageInput />
+      </SwapSettingsSlippageLayout>,
+    );
+    const container = screen.getByTestId('ockSwapSettingsLayout_container');
+    expect(container.children[0]).toHaveTextContent('Title');
+    expect(container.children[1]).toHaveTextContent('Description');
+    expect(container.children[2].children[0]).toHaveTextContent('Input');
+  });
+});

src/swap/components/SwapSettingsSlippageLayout.tsx

@@ -0,0 +1,40 @@
+import { Children, useMemo } from 'react';
+import { findComponent } from '../../internal/utils/findComponent';
+import { cn } from '../../styles/theme';
+import type { SwapSettingsSlippageLayoutReact } from '../types';
+import { SwapSettingsSlippageDescription } from './SwapSettingsSlippageDescription';
+import { SwapSettingsSlippageInput } from './SwapSettingsSlippageInput';
+import { SwapSettingsSlippageTitle } from './SwapSettingsSlippageTitle';
+
+export function SwapSettingsSlippageLayout({
+  children,
+  className,
+}: SwapSettingsSlippageLayoutReact) {
+  const { title, description, input } = useMemo(() => {
+    const childrenArray = Children.toArray(children);
+    return {
+      title: childrenArray.find(findComponent(SwapSettingsSlippageTitle)),
+      description: childrenArray.find(
+        findComponent(SwapSettingsSlippageDescription),
+      ),
+      input: childrenArray.find(findComponent(SwapSettingsSlippageInput)),
+    };
+  }, [children]);
+
+  return (
+    <div
+      className={cn(
+        'right-0 z-10 w-[21.75rem] rounded-lg border border-gray-300 bg-gray-50',
+        'px-3 py-3 shadow-lg dark:border-gray-700 dark:bg-gray-950',
+        className,
+      )}
+      data-testid="ockSwapSettingsLayout_container"
+    >
+      {title}
+      {description}
+      <div className="flex items-center justify-between gap-2">
+        {input && <div className="flex-grow">{input}</div>}
+      </div>
+    </div>
+  );
+}