No way to apply arbitrary type to custom props in panda.config

[55Cancri]

Description

Suppose I have a grid component wrapped in a framer MotionConfig component:

const Grid = React.forwardRef<HTMLDivElement, GridProps>((props, ref) => {
  const { children, config, ...rest } = props;
  return (
    <MotionConfig transition={config}>
      <Base ref={ref} {...rest}>
        {children}
      </Base>
    </MotionConfig>
  );
});

Grid.displayName = "Grid";

export default Grid;

I want all of my custom elements to be capable of receiving a config prop of type Transition, which comes from the framer motion package. It is not possible to define this property and type in the panda.config file:

import type { Transition } from "framer-motion";

export default defineConfig({
  utilities: {
    extend: {
      config: {
        values: { type: Transition }, // <-- doesn't work, expected value received type
        transform(value) {
          return { config: value };
        },
      },
})

Link to Reproduction

na

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

JS Framework

React (TS)

Panda CSS Version

^0.5.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[55Cancri]

In the end, I will be able to use my grid component and define framer motion values:

<Grid
   w={120} // <-- panda props
   bg="red.900" // <-- panda props
   config={{  // <-- my prop defined generally for all panda components
      duration: 0.14 // <-- define how components animate
   }}
   _hover={{
      bg: "gray.500"
   }}
>
  stuff here
</Grid>

[astahmer]

you can make your own component wrapping a factory with style props like this

Use the HTMLStyledProps type to get the types of an element in addition to the style props.

import { styled } from '../styled-system/jsx'
import type { HTMLStyledProps } from '../styled-system/jsx'

type ButtonProps = HTMLStyledProps<'button'> 

const Button = (props: ButtonProps) => {
  return <styled.button {...props}>
}

[55Cancri]

Yes but I would like to add a custom prop to all of the factory components. Something like:

import type { Transition } from "framer-motion";

type ButtonProps = HTMLStyledProps<'button'>  & {
    config: Transition
}

However I don't want to have to define this type for each factory components.

[astahmer]

working on it here ! #1405