feat(Paper): add borderRadius prop

.changeset/paper-border-radius-prop.md

@@ -0,0 +1,6 @@
+---
+'@toptal/picasso-paper': minor
+'@toptal/picasso': minor
+---
+
+Add `borderRadius` prop to `Paper` component. Accepts `'none' | 'sm' | 'md' | 'full'` and maps to Picasso's Tailwind border-radius scale. Defaults to no border radius (backward compatible).

packages/base/Paper/src/Paper/Paper.tsx

@@ -3,9 +3,13 @@ import React, { forwardRef } from 'react'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { twMerge } from '@toptal/picasso-tailwind-merge'
 
+export type PaperBorderRadius = 'none' | 'sm' | 'md' | 'full'
+
 export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
   /** Paper elevation shadow */
   elevation?: number
+  /** Border radius of the Paper surface */
+  borderRadius?: PaperBorderRadius
   children: ReactNode
 }
 
@@ -38,8 +42,15 @@ const shadowsMapping: Record<number, string> = {
   24: 'shadow-24',
 }
 
+const borderRadiusMapping: Record<PaperBorderRadius, string> = {
+  none: 'rounded-none',
+  sm: 'rounded-sm',
+  md: 'rounded-md',
+  full: 'rounded-full',
+}
+
 export const Paper = forwardRef<HTMLDivElement, Props>(function Paper(
-  { elevation = 1, ...props },
+  { elevation = 1, borderRadius, ...props },
   ref
 ) {
   const { className, style, children, ...rest } = props
@@ -51,6 +62,7 @@ export const Paper = forwardRef<HTMLDivElement, Props>(function Paper(
         'bg-white',
         shadowsMapping[elevation],
         'transition-shadow duration-300 delay-0',
+        borderRadius !== undefined ? borderRadiusMapping[borderRadius] : undefined,
         className
       )}
       style={style}

packages/base/Paper/src/Paper/test.tsx

@@ -20,4 +20,26 @@ describe('Paper', () => {
 
     expect(container).toMatchSnapshot()
   })
+
+  describe('borderRadius', () => {
+    it.each(['none', 'sm', 'md', 'full'] as const)(
+      'applies %s border radius class',
+      borderRadius => {
+        const { container } = render(
+          <Paper borderRadius={borderRadius}>Content</Paper>
+        )
+
+        expect(container.firstChild).toMatchSnapshot()
+      }
+    )
+
+    it('applies no border radius class when borderRadius is not set', () => {
+      const { container } = render(<Paper>Content</Paper>)
+
+      expect(container.firstChild).not.toHaveClass('rounded-none')
+      expect(container.firstChild).not.toHaveClass('rounded-sm')
+      expect(container.firstChild).not.toHaveClass('rounded-md')
+      expect(container.firstChild).not.toHaveClass('rounded-full')
+    })
+  })
 })