Adicionado propriedade asChild ao componente Button

apps/docs/src/stories/Button/Root.stories.tsx

@@ -53,6 +53,16 @@ export default {
       },
       type: { name: 'boolean', required: false },
     },
+    asChild: {
+      control: { type: 'boolean' },
+      description:
+        'Ao passar essa propriedade com o valor true, o componente irá se transformar no componente filho. É obrigatório passar um children ao utilizar essa propriedade. <b>Verifique a tag ao inspecionar o componente na DOM</b>',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+      type: { name: 'boolean', required: false },
+    },
     onClick: {
       action: 'clicked',
       description: 'Define o evento de click',
@@ -65,10 +75,16 @@ export default {
     ghost: false,
     light: false,
     disabled: false,
+    asChild: false,
   },
 } as Meta<ButtonRootProps>
 
 export const Comum: StoryObj<ButtonRootProps> = {
+  argTypes: {
+    asChild: {
+      control: 'none',
+    },
+  },
   args: {
     children: 'Clique aqui',
   },
@@ -79,6 +95,9 @@ export const ComIcone: StoryObj<ButtonRootProps> = {
     children: {
       control: 'none',
     },
+    asChild: {
+      control: 'none',
+    },
   },
   args: {
     children: [
@@ -95,6 +114,9 @@ export const ComIconeNaEsquerda: StoryObj<ButtonRootProps> = {
     children: {
       control: 'none',
     },
+    asChild: {
+      control: 'none',
+    },
   },
   args: {
     children: [
@@ -105,3 +127,15 @@ export const ComIconeNaEsquerda: StoryObj<ButtonRootProps> = {
     ],
   },
 }
+
+export const ComoTagAnchor: StoryObj<ButtonRootProps> = {
+  argTypes: {
+    children: {
+      control: 'none',
+    },
+  },
+  args: {
+    asChild: true,
+    children: <a href="/">Link</a>,
+  },
+}

packages/visu/src/__tests__/Button/Root.test.tsx

@@ -1,6 +1,5 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-
 import { Button } from '@library'
+import { fireEvent, render, screen } from '@testing-library/react'
 
 describe('Button Root tests', () => {
   const buttonText = 'Clique aqui'
@@ -55,4 +54,15 @@ describe('Button Root tests', () => {
     fireEvent.click(element)
     expect(buttonClick).toHaveBeenCalledTimes(1)
   })
+
+  it('Should render a different element using the "asChild" property', () => {
+    render(
+      <Button.Root data-testid="element" asChild>
+        <h1>Hello World</h1>
+      </Button.Root>
+    )
+    const element = screen.getByTestId('element')
+
+    expect(element.tagName).toBe('H1')
+  })
 })

packages/visu/src/library/Button/index.tsx

@@ -1,17 +1,44 @@
-import { ButtonHTMLAttributes, ComponentProps, HTMLAttributes } from 'react'
+import { CSS } from '@/stitches.config'
+import { Slot } from '@radix-ui/react-slot'
+import { VariantProps } from '@stitches/react'
+import { ButtonHTMLAttributes, HTMLAttributes } from 'react'
 
 import * as Component from './style'
 
 // ========================= ROOT =========================
 
 export interface ButtonRootProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
-    ComponentProps<typeof Component.Root> {
+    VariantProps<typeof Component.RootStyle> {
+  asChild?: boolean
   children: React.ReactNode
+  css?: CSS
 }
 
-const ButtonRoot = ({ children, ...rest }: ButtonRootProps): JSX.Element => {
-  return <Component.Root {...rest}>{children}</Component.Root>
+const ButtonRoot = ({
+  children,
+  asChild = false,
+  css,
+  ghost = false,
+  light = false,
+  size = 'md',
+  ...rest
+}: ButtonRootProps): JSX.Element => {
+  const ComponentRoot = asChild ? Slot : 'button'
+
+  return (
+    <ComponentRoot
+      className={Component.RootStyle({
+        css,
+        ghost,
+        light,
+        size,
+      })}
+      {...rest}
+    >
+      {children}
+    </ComponentRoot>
+  )
 }
 
 ButtonRoot.displayName = 'Button.Root'

packages/visu/src/library/Button/style.ts

@@ -1,4 +1,4 @@
-import { styled } from '@/stitches.config'
+import { css, styled } from '@/stitches.config'
 
 export const Icon = styled('div', {
   height: '$6',
@@ -10,7 +10,7 @@ export const Icon = styled('div', {
   },
 })
 
-export const Root = styled('button', {
+export const RootStyle = css({
   display: 'flex',
   gap: '$2half',
   alignItems: 'center',