feat(react-kit): IconButton component

packages/react-kit/src/index.ts

@@ -20,6 +20,8 @@ export { zeroDevKitWallet } from './connector.js'
 export type { ButtonProps } from './shared/components/Button'
 export { Button } from './shared/components/Button'
 export { Icon } from './shared/components/Icon'
+export type { IconButtonProps } from './shared/components/IconButton'
+export { IconButton } from './shared/components/IconButton'
 export type { InputProps } from './shared/components/Input'
 export { Input } from './shared/components/Input'
 export type {

packages/react-kit/src/shared/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { icons } from '../Icon'
+import { IconButton } from '.'
+
+const iconNames = Object.keys(icons)
+
+const meta = {
+  title: 'Shared/IconButton',
+  component: IconButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    iconName: {
+      control: 'select',
+      options: iconNames,
+    },
+    disabled: { control: 'boolean' },
+  },
+  args: {
+    iconName: 'check',
+  },
+} satisfies Meta<typeof IconButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    iconName: 'check',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    iconName: 'check',
+    disabled: true,
+  },
+}

packages/react-kit/src/shared/components/IconButton/IconButton.test.tsx

@@ -0,0 +1,77 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../Icon', async () => {
+  const React = await import('react')
+
+  const MockIcon = ({
+    name,
+    ...props
+  }: { name: string } & React.SVGProps<SVGSVGElement>) =>
+    React.createElement('svg', { 'data-testid': `icon-${name}`, ...props })
+
+  return {
+    Icon: MockIcon,
+    icons: {},
+  }
+})
+
+import { IconButton } from './index'
+
+afterEach(() => {
+  cleanup()
+})
+
+describe('IconButton', () => {
+  describe('rendering', () => {
+    it('renders an icon', () => {
+      render(<IconButton iconName="check" />)
+      expect(screen.getByTestId('icon-check')).toBeDefined()
+    })
+
+    it('renders as a button element', () => {
+      render(<IconButton iconName="check" />)
+      const button = screen.getByRole('button')
+      expect(button).toBeDefined()
+    })
+
+    it('defaults to type="button"', () => {
+      render(<IconButton iconName="check" />)
+      const button = screen.getByRole('button')
+      expect(button.getAttribute('type')).toBe('button')
+    })
+  })
+
+  describe('className merging', () => {
+    it('merges custom className onto the wrapper', () => {
+      render(<IconButton iconName="check" className="my-custom-class" />)
+      const wrapper = screen.getByRole('button').parentElement
+      expect(wrapper?.className).toContain('my-custom-class')
+      expect(wrapper?.className).toContain('rounded-2xl')
+    })
+  })
+
+  describe('event handling', () => {
+    it('calls onClick when clicked', () => {
+      const handleClick = vi.fn()
+      render(<IconButton iconName="check" onClick={handleClick} />)
+      fireEvent.click(screen.getByRole('button'))
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('does not call onClick when disabled', () => {
+      const handleClick = vi.fn()
+      render(<IconButton iconName="check" disabled onClick={handleClick} />)
+      fireEvent.click(screen.getByRole('button'))
+      expect(handleClick).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('HTML attribute passthrough', () => {
+    it('passes through aria-label', () => {
+      render(<IconButton iconName="check" aria-label="Confirm" />)
+      const button = screen.getByRole('button', { name: 'Confirm' })
+      expect(button).toBeDefined()
+    })
+  })
+})

packages/react-kit/src/shared/components/IconButton/index.tsx

@@ -0,0 +1,24 @@
+import type { ButtonHTMLAttributes } from 'react'
+
+import { cn } from '../../utils/common'
+import { Icon, type IconName } from '../Icon'
+import { Wrapper } from '../Wrapper'
+
+export interface IconButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  iconName: IconName
+}
+
+export function IconButton({ iconName, className, ...rest }: IconButtonProps) {
+  return (
+    <Wrapper className={cn('h-13 w-13 rounded-2xl', className)}>
+      <button
+        type="button"
+        className="flex items-center justify-center flex-1 h-full w-full hover:bg-white/40 transition-colors"
+        {...rest}
+      >
+        <Icon name={iconName} className="h-6 w-6 text-greyScale" />
+      </button>
+    </Wrapper>
+  )
+}