styled JSX component type

[HasanHaghniya]

this is how i defined my input , when i export the component with styled and my editor says the type of Input is:
StyledComponent<React.ForwardRefExoticComponent< StyledComponent<React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>, {}>& React.RefAttributes<HTMLInputElement>>, {}>
, I expect when i using this component in WebStorm it load me InputProps and Styles props like "padding", "paddingY" , "margin" .... in auto complete but it says no suggestion , even my own InputProps, but when i export BaseInput the autocomplete shows me InputProps

interface InputProps {
  label?: string
  error?: boolean
  prefixNode?: React.ReactNode
  suffixNode?: React.ReactNode
  description?: string
  errorMessage?: string
  successMessage?: string
}

const BaseInput = forwardRef<HTMLInputElement, InputProps>(
  (
    { description, errorMessage, successMessage, error, ...props }: InputProps,
    forwardedRef
  ) => (
    <div>
      <StyledLabel variant={"STRONG"} as={"label"}>
        {props.label}
      </StyledLabel>
      <Container error={error}>
        {props.prefixNode}
        <StyledInput
          placeholder={props.placeholder}
          ref={forwardedRef}
          {...props}
        />
        {props.suffixNode}
      </Container>
      {description && <Text slot="description">{description}</Text>}
      {errorMessage && <Text slot="errorMessage">{errorMessage}</Text>}
      {successMessage && <Text slot="successMessage">{errorMessage}</Text>}
    </div>
  )
)

BaseInput.displayName = "Input"

export const Input = styled(BaseInput)

...

I had no problem with stitches when i wrote the styles like this

interface InputProps extends React.ComponentProps<typeof StyledInput> {
  label?: string
  error?: boolean
  prefixNode?: React.ReactNode
  suffixNode?: React.ReactNode
  description?: string
  errorMessage?: string
  successMessage?: string
} 

and the auto suggestion in webstorm load me my own props + stitches styles props , how can we achieve this in Panda?

[astahmer]

I think you're looking for HTMLStyledProps
https://panda-css.com/docs/concepts/style-props#style-props

[HasanHaghniya]

if you try it , auto suggestion just prefer your props like label, error and etc, still you wont get native input attrs like type , onClick and ...

interface InputProps extends HTMLStyledProps<"input"> {
  label?: string
  error?: boolean
  prefixNode?: React.ReactNode
  suffixNode?: React.ReactNode
  description?: string
  errorMessage?: string
  successMessage?: string
}

[Mydayyy]

Did you end up finding a solution to this? Auto completion is completely broken in webstorm for me as well