Creating a custom Popover

[marciomunhoz]

Hi, all,

I'm attempting to create a custom popover based on the headless Popover, but I'm encountering an issue:

My customize Popover

'use client'

import { Popover } from '@headlessui/react'
import { ComponentType, ElementRef, Ref, forwardRef } from 'react'
import { twMerge } from 'tailwind-merge'
import { tv } from 'tailwind-variants'

const popoverVariants = tv({
  slots: {
    panel:
      'flex h-10 items-center space-x-1 rounded-md border bg-background p-1 absolute',
    trigger: '',
  },
})

export type ExtractProps<T> = T extends ComponentType<infer P> ? P : T

const PopoverTrigger = forwardRef(function PopoverTrigger(
  { className, ...props }: ExtractProps<typeof Popover.Button>,
  ref: Ref<ElementRef<typeof Popover.Button>>,
) {
  return (
    <Popover.Button
      ref={ref}
      className={twMerge(popoverVariants().trigger(), className)}
      {...props}
    />
  )
})

const PopoverContent = forwardRef(function PopoverContent(
  { className, ...props }: ExtractProps<typeof Popover.Panel>,
  ref: Ref<ElementRef<typeof Popover.Panel>>,
) {
  return (
    <Popover.Panel
      ref={ref}
      className={twMerge(popoverVariants().panel(), className)}
      {...props}
    />
  )
})

export { Popover, PopoverContent, PopoverTrigger }

When I use the component with the as prop, I encounter an error because TypeScript can't find the variant (which is implemented in Button).

...
<Popover>
      <PopoverTrigger as={Button} variant="primary">
        {membership.find((item) => item.slug === team)?.title || 'Selecione'}
        <IconChevronDown className="w-4 h-4" />
      </PopoverTrigger>
...

Type '{ children: (string | Element)[]; as: ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<TVReturnType<{ variant: { primary: string; ghost: string; outline: string; destructive: string; link: string; }; size: { ...; }; }, ... 5 more ..., TVReturnType<...>>> & { ...; } & RefAttributes<......' is not assignable to type 'IntrinsicAttributes & Omit<CleanProps<ElementType, "disabled" | ButtonPropsWeControl> & OurProps<ElementType, ButtonRenderPropArg> & { ...; } & { ...; } & { ...; }, "ref"> & RefAttributes<...>'.
  Property 'variant' does not exist on type 'IntrinsicAttributes & Omit<CleanProps<ElementType, "disabled" | ButtonPropsWeControl> & OurProps<ElementType, ButtonRenderPropArg> & { ...; } & { ...; } & { ...; }, "ref"> & RefAttributes<...>'.

Is there an example template for implementing a custom component? Can someone help me?

Thank you very much!