Flexible Component Wrapper System

Build a reusable component wrapper system that provides consistent layout and behavior for different types of child components.

Requirements

Create a TypeScript module that exports wrapper components with properly typed props that work seamlessly with various child components.

Card Component

Build a Card wrapper component that:

• Accepts children elements to render inside the card
• Accepts an optional variant prop that can be "default" or "bordered"
• Accepts an optional padding prop that can be "small", "medium", or "large"
• Uses correct TypeScript types so the component accepts children and these variant props

Button Wrapper

Build a ButtonWrapper component that:

• Wraps a standard HTML button element
• Accepts all the props that a native button element accepts (like onClick, disabled, type, etc.)
• Adds an additional optional icon prop of type string
• Passes through all button props to the underlying button element
• Uses correct TypeScript types to ensure type safety

Test Cases

• When Card receives children, it renders them correctly @test
• When Card receives variant="bordered", it applies the bordered class @test
• ButtonWrapper accepts standard button props like onClick and disabled @test
• ButtonWrapper with icon prop renders both icon and children @test

Implementation

@generates

API

export function Card(props: /* YOUR TYPE HERE */): JSX.Element;

export function ButtonWrapper(props: /* YOUR TYPE HERE */): JSX.Element;

Dependencies { .dependencies }

@types/react { .dependency }

Provides TypeScript type definitions for React.